在SVG路径中嵌入文本 [英] Nest text inside SVG path

问题描述

是否可以在SVG 路径元素中嵌入文本（如 text 元素）？

Is it possible to nest text (like a text element) inside an SVG path element?

我问，因为我想要一个文本气球出现在悬停在一个路径，像这样：

I am asking because I would like a text balloon to show up when hovering over a path, something like this:

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

我想避免使用JavaScript，但我明白可能是唯一的选项。

I would like to avoid using JavaScript, but I understand that may be the only option.

推荐答案

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

Yes you can use <text> inside <svg>.

您可以使用：

svg text:hover{
    fill:red;
}

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

To apply css rules when hovered. Here is working JSFiddle. But if you want to display a bubble notification that changes position based on hovered element, you must use JavaScript. If the position does not change then you can do it in CSS by simply hiding and displaying a div.

这篇关于在SVG路径中嵌入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！