ID attribute

In order to animate your shape, you must uniquely identify all elements that you want to animate with the id attribute. All elements with a unique ID will be available in the Element dropdown of your actions, which can be used to change the element’s appearance dynamically at runtime.

Please note that an ID must be unique and must only contain letters and numbers.

Example

<svg version="1.1" id="AvelonVentilationFlaps" x="0px" y="0px"
     width="39px" height="79px">
    <rect id="OutOfService" x="-2" y="-2" fill="#FFCC00"
          stroke="#EEBB00" width="44" height="84" />
    <rect x="0" y="0" fill="#555555" width="39" height="79" />
    <rect x="1" y="1" fill="url(#VentilationBox)"
          width="37" height="77" />
    <rect id="Alarm" x="1" y="1" fill="url(#VentilationBoxAlarm)"
          width="37" height="77" />
    <g id="TopFlap">
        <circle fill="#555555" stroke="#555555"
                cx="0" cy="0" r="1.5" />
        <line fill="none" stroke="#555555"
                x1="0" y1="-19" x2="0" y2="19" />
    </g>
    <g id="BottomFlap">
        <circle fill="#555555" stroke="#555555"
                cx="0" cy="0" r="1.5" />
        <line fill="none" stroke="#555555"
              x1="0" y1="-19" x2="0" y2="19" />
    </g>
</svg>