在 SVG 中悬停在多边形上时显示文本
Posted
技术标签:
【中文标题】在 SVG 中悬停在多边形上时显示文本【英文标题】:Show text on hover on polygon in SVG 【发布时间】:2016-11-08 10:28:02 【问题描述】:是否可以在悬停时添加带有 svg 多边形形状的文本?
我的代码是这样的
<svg>
<polygon class="st0" points="0,1.833 638,1.833 383,348.833 0,348.833 "/>
<polygon class="st0" points="0,355.333 649,355.333 891.5,664.833 0,664.833 "/>
<polygon class="st0" points="392.5,348.833 514.75,181.333 645.25,348.833 "/>
<polyline class="st0" points="518.875,174.908 644.667,2.021 1139.833,1.52 1139.75,663.583 897.25,663.583 "/>
</svg>
当我检查许多参考资料时,只有单个多边形的示例,但在我的代码中,我需要 4 个形状,在 SVG 标记中具有不同的文本。是否可以在悬停时添加多个多边形的文本?
Here a fiddle what I have
当我悬停时,我想要这样
任何建议将不胜感激
【问题讨论】:
什么样的“文字”?目前尚不清楚您要做什么。 @Paulie_D 文字悬停。天气晴朗!阅读问题标题 【参考方案1】:你可以添加
<title>Your text</title>
<svg></svg>
或 <poligon></poligon>
标记内的标记,显示带有文本的默认工具提示。
更新jsfiddle
来源:
https://developer.mozilla.org/en/docs/Web/SVG/Element/title
Tooltips not showing when hovering over SVG polygons
.st0
fill: #0491B7;
.st1
fill: #0491B7;
.st1:hover
fill: red;
opacity: 0.5;
.st0:hover
fill: red;
text
display:none;
fill:#fff;
font-size:2em;
font-family:sans-serif;
text.sub-text
display:none;
fill:#fff;
font-size:0.8em;
font-family:sans-serif;
g:hover > text
display:block;
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve">
<g>
<polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 ">
<title>One</title>
</polygon>
<text x="10" y="40"> TITLE </text>
<text x="10" y="55" class="sub-text">Some Content</text>
</g>
<polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 ">
<title>Two</title>
</polygon>
<polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 ">
<title>Three</title>
</polygon>
<polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063">
<title>Four</title>
</polyline>
</svg>
【讨论】:
是的,它摇滚.. 谢谢@eirenaios以上是关于在 SVG 中悬停在多边形上时显示文本的主要内容,如果未能解决你的问题,请参考以下文章