Question

我的SVG中有一个圆圈，我想要工具提示之类的东西，但尽可能简单，如果可能的话，最好只使用CSS。

<circle fill="#FFFFFF" stroke="#000000" stroke-width="3" cx="50" cy="50" r="5"><title>Hello, world!</title></circle>

此代码有效且浏览器正常显示标题，但是可以更改标题颜色，位置等吗？

Answer 1

试试这个：

HTML -

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
   <g id="component">
      <rect id="content" width="50" height="50">
      </rect>
    <g class="tooltip" transform="translate(20,20)" opacity="0.9">
      <rect rx="5" width="100" height="25"></rect>
      <text x="15" y="16">Hello</text>
     </g>
    </g>
</svg>

CSS -

#component .tooltip {
   visibility: hidden
}

#component:hover .tooltip {
  visibility: visible;
  position: absolute;
 }

#component:hover:after .tooltip{
 position: relative;
 left: 0;
 top: 100%;
 white-space: nowrap;
}

.tooltip text {
 fill: black;
 font-size: 12px;
 font-family: sans-serif; 
}

.tooltip rect {
 fill: yellow;
 stroke: blue;
}

您可以在https://www.w3.org/TR/SVG/styling.html上阅读更多相关信息。您也可以在http://plnkr.co/edit/HBlyg15J69XEprC2gyBj?p=preview

上进行试验

在svg圈中设置标题样式

1 个答案: