12.8 The <set> element

All of these animations have modified values over time. Sometimes, particularly for non-numeric attributes or properties that can't transition, you simply want to change the value at a chosen point in the animation sequence.
For example, you might want an initially invisible text item to become visible at a certain time; there's no real need for both a from and to. Thus, SVG has the convenient short-hand of the element, which needs only a to attribute and the proper timing information.

Example 1. Application of the <set> element

Here was a circle. 
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000">
      <circle cx="60" cy="60" r="30" style="fill:#ff9; stroke:gray;">
    <animate
      id="c1"
      attributeName="r"
      attibuteType="XML"
      begin="0s" dur="4s"
      from="30" to="0"
      fill="freeze"/>
  </circle>
  <text text-anchor="middle" x="60" y="60" style="visibility:hidden; font-size:8;">
    <set
      attributeName="visibility"
      attributeType="CSS"
      to="visible"
      begin="4.5s" dur="1s"
      fill="freeze"/>
        Here was a circle.
  </text>
</svg>