css - 在 svg 圆圈中设置标题样式

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