SVG路徑中的嵌套文本

Question

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

我問，因爲上空盤旋時的路徑，這樣的事情，我想一個文本氣球顯示：

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

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

Answer 1

是的，你可以使用<text>裏面<svg>。

您可以使用：

svg text:hover{ 
    fill:red; 
} 

要徘徊時，將CSS規則。這裏是JSFiddle。但是，如果您想顯示基於懸停元素更改位置的泡泡通知，則必須使用JavaScript。如果位置沒有改變，那麼你可以通過隱藏和顯示div來在CSS中完成。

Answer 2

根據此：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 3

如果要顯示工具提示，可以將標題元素插入到目標形狀元素中，li這個。

<?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>