时间戳

首页 > 解决方案 > HTML svg 标签内的标签保持黑色

html - HTML svg 标签内的标签保持黑色

问题描述

我想制作一个包含文本的圆圈（可点击）。它有效......它是可点击的......但是当我点击它时文本颜色变为黑色。然后它不会变回我想要的颜色。

<svg>
    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="grey" />
    <text style="text-decoration: none; color: green;" x="50" y="50"><a style="text-decoration: none; color: green;" href="#">hei</a></text>
</svg>

我在 text 和 tag 中都写了 text-decoration 和 color 的原因是因为我已经对它们都进行了尝试，但它们都不起作用。

标签： htmlcss

解决方案

使用fill而不是颜色，因为它是SVG 文本节点

请参阅下面的片段

text a {
 /* fill:red;*/
}
<svg>
    <circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="grey" />
    <text x="50" y="50"><a style="text-decoration: none; fill: green;" href="#">hei</a></text>
</svg>

推荐阅读