如何使SVG中出现透明文字

Question

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

Answer 1

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>