I have a rectangle and some text within it. The entire rectangle and the text within it is clickable, and opens a new web page when clicked.
我有一个矩形和一些文本。整个矩形及其中的文本是可单击的,并在单击时打开一个新的网页。
I need to use styling within my SVG document such that, when I move the mouse over the text or the rectangle, it should show a border around the rectangle. Because everything in the box is clickable, the <path> and <text> elements are within an <a> element. So, if a do something like this, I get a border around the path as well as the text.
我需要在我的SVG文档中使用样式,这样当我将鼠标移到文本或矩形上时,它应该在矩形周围显示边框。由于框中的所有内容都是可单击的,因此
<style type="text/css">
<![CDATA[
a:hover
{
stroke:#26a9e0
}
]]>
</style>
How can I get border just around the box, even when the mouse is moved over path or text?
即使将鼠标移到路径或文本上,我怎么能在盒子周围获得边框?
Edit: This is an edit to the original question that was originally posted as an answer by the OP
编辑:这是原始问题的编辑,最初由OP发布作为答案
Thanks for the response. Putting in more code here for clarity
谢谢你的回复。为了清楚起见,在这里添加更多代码
<a aria-labeledby="itemTitle" cursor="pointer" xlink:href="http://some-link" target="_blank">
<path id="path3856" fill-rule="evenodd" fill="#26a9e0" d="m808.52,167.06,0,58.146,3.7936,0,0-58.146-3.7936,0z"/>
<path id="path3858" fill-rule="evenodd" fill="#FFF" d="m811.83,167.06,0,58.146,172.16,0,0-58.146-172.16,0z"/>
<text id="text3860" style="text-anchor:start;text-align:start;" font-weight="normal" xml:space="preserve" font-size="17.65748024px" font-style="normal" y="191.36598" x="822.92633" font-family="Segoe UI" fill="#000000">Some Text</text>
</a>So, you can see that I have which includes and . The effect I need is to have a border around the box, which is denoted by in the code. The important thing is that border should show both on moving the mouse over the shape as well as text. So, if do what you suggested, i get the border on the rectangle only when the mouse is on the rectangle. If i move it over the text in the rectangle, the border goes away.
所以,你可以看到我有哪些包括和。我需要的效果是在框周围有一个边框,在代码中表示。重要的是边框应该在将鼠标移动到形状和文本上时显示。因此,如果按照您的建议进行操作,只有当鼠标位于矩形上时,我才会在矩形上获得边框。如果我将其移动到矩形中的文本上,则边框会消失。
To fix this, if I do
要解决这个问题,如果我这样做
a:hover
{
stroke:#26a9e0;
}I see the border on the box as well as the text when I move the mouse over it.
当我将鼠标移到它上面时,我会看到盒子上的边框以及文本。
This is a little tricky to explain, i know. I hope I am making myself clear.
我知道,解释起来有点棘手。我希望我清楚自己。
1 个解决方案
#1
0
It's hard to tell from your code, as it's incomplete (e.g. need to see the rectangle), but I suspect what you need is to use the rect element instead of the a element. Currently you're setting the stroke color when on an a, try this instead:
从你的代码中很难说,因为它不完整(例如需要看到矩形),但我怀疑你需要的是使用rect元素而不是a元素。目前,您在a上设置笔触颜色,请尝试以下方法:
rect:hover
{
stroke:#26a9e0
}
Of course, it would be better to me more specific (this would affect all rectangles) so you'd want to make it a particular class (say glow) and use rect.glow instead of just rect.
当然,对我来说更好一点(这会影响所有矩形)所以你想让它成为一个特定的类(比如发光)并使用rect.glow而不是rect。
#1
0
It's hard to tell from your code, as it's incomplete (e.g. need to see the rectangle), but I suspect what you need is to use the rect element instead of the a element. Currently you're setting the stroke color when on an a, try this instead:
从你的代码中很难说,因为它不完整(例如需要看到矩形),但我怀疑你需要的是使用rect元素而不是a元素。目前,您在a上设置笔触颜色,请尝试以下方法:
rect:hover
{
stroke:#26a9e0
}
Of course, it would be better to me more specific (this would affect all rectangles) so you'd want to make it a particular class (say glow) and use rect.glow instead of just rect.
当然,对我来说更好一点(这会影响所有矩形)所以你想让它成为一个特定的类(比如发光)并使用rect.glow而不是rect。