SVG Set Element

by Online Tutorials Library July 14, 2022

Set Element

The set element is used to set the non-numeric attribute or property.

It sets the initially invisible text item to visible text item at a certain time without the need of both “from” and “to” elements.

The <set> element only needs a “‘to” attribute and the proper timing information.

Example

  <!DOCTYPE html>  <html>  <title>SVG Animation</title>  <body>  <svg height=”450″ width=”450″>    <rect x=”50″ y=”40″ width=”60″ height=”60″   style=”fill: purple; fill-opacity: .4; stroke: black;”>  <animate attributeName=”width” attributeType=”XML”   begin=”0s” dur=”4s” from=”60″ to=”0″ fill=”freeze”/>  <animate attributeName=”height” attributeType=”XML”   begin=”0s” dur=”4s” from=”60″ to=”0″ fill=”freeze”/>  </rect>    <text text-anchor=”middle” x=”60″ y=”60″ style=”visibility: hidden;”>  <set attributeName=”visibility” attributeType=”CSS”   to=”visible” begin=”4.5s” dur=”1s” fill=”freeze”/>   All gone!    </text>  </svg>  </body>  </html>  

Test it Now

Next TopicThe animateTransform Element

SVG Set Element

Set Element

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like