在SVG路径中嵌套文本

Question

是否可以text在SVG path元素中嵌套文本(如元素)？

我在问,因为我希望在悬停在路径上时显示一个文本气球,如下所示:

path#mypath:hover text {
    display:block;
}

我想避免使用JavaScript,但我知道这可能是唯一的选择.

Answer 1

根据这个:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path你不能嵌入<text>里面<path>

但是,您可以使用相邻元素作为悬停效果的触发器:http://jsfiddle.net/93ufH/1/

<svg>
    <rect x="10" y="10" width="100" height="100"/>
    <text x="0" y="50" font-family="Verdana" font-size="55" fill="blue" > 
        Hello
    </text>
</svg>

CSS

svg text{
    visibility:hidden;
}

svg rect:hover + text{
    visibility:visible;
}

Answer 2

<text>是的，您可以在里面使用<svg>。

您可以使用：

svg text:hover{
    fill:red;
}

悬停时应用 CSS 规则。这是正在工作的JSFiddle。但是，如果您想显示根据悬停元素更改位置的气泡通知，则必须使用 JavaScript。如果位置没有改变，那么你可以在 CSS 中通过隐藏和显示 div 来完成。