Symbol element support

The library support the symbol element^[1]

See The symbol element

.

Contrary to a regular element, a symbol is only shown for its usages (see use element support).

The following attributes are supported:

• The id attribute
• The width and height attributes
• The viewBox attribute
• The preserveAspectRatio attribute

Handling of the viewbox

If one of the width, height, and viewBox attributes is not present, the symbol will be rendered without scaling.

If all of the width, height, and viewBox attributes are present:

• The symbol will be scaled according to the width and height attributes, and the viewBox width and height
• If the preserveAspectRatio attribute is not present or is different to none, then the coordinates of the symbol will be scaled with the same value for both X and Y axis^[2]
  Which means that no scaling will be applied to the resulting JavaFX Node
• Else a scaling will be applied to the resulting JavaFX Node, which will be different for X and Y axis

Handling of the preserveAspectRatio attribute

Only two states are considered for the preserveAspectRatio attribute:

• A value of none means that the scaling for the X and Y axis is independant
• All other values means that the scaling for the X and Y axis will be identical

Note that the second meetOrSlice optional parameter of the preserveAspectRatio attribute is not taken into account.

Examples

Basic example

The following specifiation:

      <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
         <symbol id="myDot">
            <circle cx="5" cy="5" r="5" />
         </symbol>
         <use href="#myDot" x="20" y="5" style="opacity:0.8" />
      </svg>

Example with scaling

The following specifiation:

      <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
         <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
            <circle cx="1" cy="1" r="1" />
         </symbol>
         <use href="#myDot" x="5"  y="5" style="opacity:1.0" />
         <use href="#myDot" x="20" y="5" style="opacity:0.8" />
         <use href="#myDot" x="35" y="5" style="opacity:0.6" />
         <use href="#myDot" x="50" y="5" style="opacity:0.4" />
         <use href="#myDot" x="65" y="5" style="opacity:0.2" />
      </svg>

In this example, the coordinates will be scaled from a 5 = 10 / 2 factor on both the X and Y axis.

Limitations

• For the moment all values for the preserveAspectRatio attribute different from none are considered identically