CODEWITHSUNDEEP
htmlcss
NitroFray
NitroFray

Reputation: 43

HTML a tag inside svg tag stays in black color

I want to make a circle that has text in it (that is clickable). It works... it is clickable... but the text color changes to black when I click it. And then it won't turn back to the color I want it to be.

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

The reason for why I have written text-decoration and color in both the text and a tag is because I've tried it with both of them, and none of them works.

Upvotes: 1

Views: 518

Answers (1)

scraaappy
scraaappy

Reputation: 2886

Use fill instead of color as it is a SVG text node

See snippet below

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>

Upvotes: 1

Related Questions