CODEWITHSUNDEEP
htmlsvg
Hetian BAI
Hetian BAI

Reputation: 1

How to make transparent text appear in SVG

<svg>
        <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue" opacity="0">Hello</text>
        <animate attributeName="opacity" begin="click" dur="0.3s" from="0" to="1" restart="never" fill="freeze"></animate>
</svg>

Above is the code, I want to use SVG to make a transparent text appear. I am new to coding especially SVG, thanks for any help and creative thoughts.

Upvotes: 0

Views: 297

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

The easiest thing is to make the animate element a child of the text element.

<svg>
        <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue" opacity="0">Hello
        <animate attributeName="opacity" begin="click" dur="0.3s" from="0" to="1" restart="never" fill="freeze"></animate>
        </text>
</svg>

Otherwise you could add a href or xlink:href attribute to the animate tag to tell it that it's the text element you want to affect

<svg>
        <text id="t" x="0" y="50" font-family="Verdana" font-size="35" fill="blue" opacity="0">Hello
        </text>
        <animate attributeName="opacity" href="#t" begin="click" dur="0.3s" from="0" to="1" restart="never" fill="freeze"></animate>
</svg>

Upvotes: 2

Related Questions