wiki:SVG properties

Version 9 (modified by Said Abou-Hallawa, 2 years ago) (diff)


SVG Properties

What is an SVG property?

It is a storage for data type which can be primitive, DOM type or SVG type. Example of primitive types are int, float, boolean. Examples for DOM type is DOMString. And examples for SVG types are SVGNumber, SVGNumberList, SVGLength, SVGLengthList, SVGAngle, SVGPoint, SVGPointList.

What is so special about SVG property?

  1. It has to provide a DOM interface. The interface can get or set its value similar to getAttribute() and setAttribute() methods.
  2. It has to be RefCounted because the DOM object will encapsulate the same SVG property and this DOM object can outlive the owner element.
  3. It is a reflection of a DOM attribute. Two cases have to be handled:
    1. When setAttribute() called for the underlaying attribute, SVGElement::parseAttribute() will be called to update the SVG property. Then SVGElement::svgAttributeChanged() is called to invalidate the renderer and the dependent SVG objects.
    2. When the SVG property is changed through the DOM interface. In this handled in two steps:
      • The commit step which is called immediately after changing the property's value. It will mark the value of the underlaying attribute to be invalid and it will call SVGElement::svgAttributeChanged().
      • The synchronize step which happens later when the value of attribute is required. The valueAsString() of the SVG property is set as the attribute value.
  4. Most of the properties are animated properties. The animated property has two members baseVal() and the animal(). Each of them are from the same SVG property type. animal() differs from baseVal() only when animating. Otherwise they have to be the same value.
  5. The animal() of the animated property is read only; no changes from the DOM is allowed.
  6. The SVG property can be attached to an SVGElement or it can be detached.
  7. Some properties are SVG lists of SVG types, e.g. SVGNumberList and SVGPointList. In addition of having the list itself Refcounted, all the items of this list have to be RefCounted also. The items can outlive the owner list.

Mechanic of the SVG property

  1. Define the property registry of the element such that it associate the class with its all superclasses. And define a member of this type. For example the SVGRectElement has this definition and member declartion:
    using PropertyRegistry = SVGPropertyOwnerRegistry<SVGRectElement, SVGGeometryElement, SVGExternalResourcesRequired>;
    PropertyRegistry m_propertyRegistry { *this };
  2. Override the virtual method propertyRegistry() which will allow the base class SVGElement to perform operations on all the SVG properties of any superclass.
    const SVGPropertyRegistry& propertyRegistry() const final { return m_propertyRegistry; }
  3. The property of defined in the header file of the SVG element exactly as it is defined in the IDL file. For example, SVGRectElement will have this member
    Ref<SVGAnimatedLength> m_x { SVGAnimatedLength::create(this, LengthModeWidth) };
  4. The SVGAnimatedLength has two members named m_baseVal and m_animVal. Both of them are of type SVGLength.
  5. The property is registered only once in the constructor of the SVG element. This registration will associate the data member with the attribute name. For example the constructor of the SVGRectElement will have this statement:
    PropertyRegistry::registerProperty<SVGNames::xAttr, &SVGRectElement::m_x>();
  6. This statement calls the override method of SVGPropertyOwnerRegistry
    template<const LazyNeverDestroyed<const QualifiedName>& attributeName, Ref<SVGAnimatedLength> OwnerType::*property>
    static void registerProperty()
        registerProperty(attributeName, SVGAnimatedLengthAccessor<OwnerType>::template singleton<property>());
  7. This registration associates a pointer to a member of SVGRectElement with the attributeName through the SVGAnimatedLengthAccessor.