Question

是否可以在SVG text元素中嵌套文本（如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

如果要显示工具提示，可以将标题元素插入目标形状元素，如下所示。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle r="50" cx="50" cy="50">
        <title>tooltip</title>
    </circle>
</svg>

Answer 3

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

您可以使用：

svg text:hover{
    fill:red;
}

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

在SVG路径中嵌套文本

3 个答案: