Question

是否可以在悬停时使用svg多边形形状添加文字？

我的代码

＆＃13;

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

＆＃13;

当我检查了很多参考时，只有一个多边形的例子，但在我的代码中，我需要在SVG标签中有4个不同文本的形状。是否可以在悬停时使用多个多边形添加文本？

Here a fiddle what I have

当我盘旋时，我想要这样

任何建议都将不胜感激

Answer 1

哟可以添加

<title>Your text</title>

标记在<svg></svg>或<poligon></poligon>标记内，显示带有文字的默认工具提示。

更新了jsfiddle

来源：

＆＃13;

.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;
}

＆＃13;

<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" width="1139.833px" height="663.313px" 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>

＆＃13;

在SVG中悬停在多边形上显示文本

1 个答案: