Class SvgElement

java.lang.Object
com.vaadin.flow.dom.Node<com.vaadin.flow.dom.Element>
com.vaadin.flow.dom.Element
org.vaadin.firitin.element.svg.SvgElement
All Implemented Interfaces:
Serializable
Direct Known Subclasses:
ClipPathElement, DefsElement, LinearGradientElement, MaskElement, PatternElement, RadialGradientElement, StopElement, SvgGraphicsElement, SymbolElement
public class SvgElement extends com.vaadin.flow.dom.Element
A class for root SVG elements and a superclass for svg elements.

A hacky workaround around over-engineered Element "feature" that prevents its usage with Svg and MathML elements. E.g. Can be used to build components that utilise SVG DOM with Element API.

Write-Only vs Read-Write Attributes

This SVG API provides two variants for setting attribute values:

  • Default methods (e.g., x1(), fill()) - These use an optimized write-only approach where attribute values are batched and sent to the client via JavaScript execution. This is more efficient for typical SVG usage where attributes are set but rarely read back. The attribute values are NOT stored on the server side.
  • RW (Read-Write) methods (e.g., x1RW(), fillRW()) - These use the traditional setAttribute(String, String) approach where values are stored on the server and can be retrieved via Element.getAttribute(String). Use these when you need to read attribute values back in your Java code.

The write-only optimization batches multiple attribute changes and sends them in a single JavaScript call just before the response is sent to the client. Multiple changes to the same attribute within a request-response cycle are coalesced, sending only the final value.

Important: Write-only attributes will be lost if the element is removed from the DOM and later re-attached. Since the values are not stored on the server, they cannot be restored when the element is re-added. Use the RW (Read-Write) variants if your application needs to detach and re-attach SVG elements while preserving their attribute values.

See Also:

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Class
    Description
    static enum 
    SvgElement.PreserveAspectRatio
    Preserve aspect ratio options for the SVG element.

  • Constructor Summary

    Constructors
    Constructor
    Description
    SvgElement(int minX, int minY, int width, int height)
    Creates an SVG root element with the specified viewBox dimensions.
    SvgElement(String tag)
     

  • Method Summary

    Modifier and Type
    Method
    Description
    static SvgElement
    emptySvgRoot()
     
    protected void
    flushPendingAttributes()
     
    String
    getOuterHTML()
     
    protected String
    getPendingOrAttribute(String attribute)
    Gets an attribute value, checking pending write-only attributes first.
    VStyle
    getStyle()
     
    <T extends SvgElement>
    T
    height(double height)
    Sets the height of the SVG element.
    <T extends SvgElement>
    T
    height(String height)
    Sets the height of the SVG element with a unit.
    <T extends SvgElement>
    T
    id(String id)
    Sets the ID of this element.
    <T extends SvgElement>
    T
    preserveAspectRatio(String ratio)
    Sets the preserveAspectRatio attribute with a custom value.
    <T extends SvgElement>
    T
    preserveAspectRatio(SvgElement.PreserveAspectRatio ratio)
    Sets the preserveAspectRatio attribute.
    protected void
    scheduleBeforeClientResponse()
     
    com.vaadin.flow.dom.Element
    setAttribute(String attribute, String value)
     
    protected com.vaadin.flow.dom.Element
    setWriteOnlyAttribute(String attribute, String value)
    Sets an attribute using write-only optimization.
    <T extends SvgElement>
    T
    size(double width, double height)
    Sets the size of the SVG element.
    <T extends SvgElement>
    T
    size(String width, String height)
    Sets the size of the SVG element with units.
    <T extends SvgElement>
    T
    viewBox(double minX, double minY, double width, double height)
    Sets the viewBox attribute, which defines the position and dimension of the SVG viewport.
    <T extends SvgElement>
    T
    width(double width)
    Sets the width of the SVG element.
    <T extends SvgElement>
    T
    width(String width)
    Sets the width of the SVG element with a unit.

    Methods inherited from class com.vaadin.flow.dom.Element

    addAttachListener, addDetachListener, addEventListener, addPropertyChangeListener, addPropertyChangeListener, as, attachShadow, bindAttribute, bindProperty, bindText, callJsFunction, callJsFunction, createText, executeJs, executeJs, get, get, getAttribute, getAttributeNames, getChild, getChildCount, getChildren, getClassList, getComponent, getParent, getProperty, getProperty, getProperty, getProperty, getProperty, getPropertyBean, getPropertyBean, getPropertyNames, getPropertyRaw, getSelf, getShadowRoot, getTag, getText, getTextRecursively, getThemeList, hasAttribute, hasProperty, isEnabled, isTextNode, isVisible, removeAttribute, removeFromParent, removeFromTree, removeFromTree, removeProperty, scrollIntoView, scrollIntoView, setAttribute, setAttribute, setAttribute, setEnabled, setProperty, setProperty, setProperty, setPropertyBean, setPropertyJson, setPropertyList, setPropertyMap, setText, setVisible, toString

    Methods inherited from class com.vaadin.flow.dom.Node

    accept, appendChild, appendChild, appendVirtualChild, appendVirtualChild, ensureChildHasParent, equals, getNode, getParentNode, getStateProvider, hashCode, indexOfChild, insertChild, insertChild, isVirtualChild, removeAllChildren, removeChild, removeChild, removeChild, removeVirtualChild, removeVirtualChild, setChild

    Methods inherited from class Object

    clone, finalize, getClass, notify, notifyAll, wait, wait, wait

  • Constructor Details

    • SvgElement

      public SvgElement(String tag)

    • SvgElement

      public SvgElement(int minX, int minY, int width, int height)
      Creates an SVG root element with the specified viewBox dimensions.
      Parameters:
      minX - The minimum x-coordinate of the viewBox.
      minY - The minimum y-coordinate of the viewBox.
      width - The width of the viewBox.
      height - The height of the viewBox.

  • Method Details

    • getPendingOrAttribute

      protected String getPendingOrAttribute(String attribute)
      Gets an attribute value, checking pending write-only attributes first.

      This is useful when you need to read an attribute that may have been set via setWriteOnlyAttribute(String, String) earlier in the same request-response cycle.

      Parameters:
      attribute - the attribute name
      Returns:
      the pending value if set, otherwise the stored attribute value

    • emptySvgRoot

      public static SvgElement emptySvgRoot()

    • id

      public <T extends SvgElement> T id(String id)
      Sets the ID of this element.

      The ID can be used to reference this element from other elements, such as <use> elements or gradient/pattern fills.

      Parameters:
      id - the ID for this element
      Returns:
      this element for method chaining

    • viewBox

      public <T extends SvgElement> T viewBox(double minX, double minY, double width, double height)
      Sets the viewBox attribute, which defines the position and dimension of the SVG viewport.
      Parameters:
      minX - the x-coordinate of the viewBox origin
      minY - the y-coordinate of the viewBox origin
      width - the width of the viewBox
      height - the height of the viewBox
      Returns:
      this element for method chaining

    • width

      public <T extends SvgElement> T width(double width)
      Sets the width of the SVG element.
      Parameters:
      width - the width value
      Returns:
      this element for method chaining

    • width

      public <T extends SvgElement> T width(String width)
      Sets the width of the SVG element with a unit.
      Parameters:
      width - the width with unit (e.g., "100%", "200px")
      Returns:
      this element for method chaining

    • height

      public <T extends SvgElement> T height(double height)
      Sets the height of the SVG element.
      Parameters:
      height - the height value
      Returns:
      this element for method chaining

    • height

      public <T extends SvgElement> T height(String height)
      Sets the height of the SVG element with a unit.
      Parameters:
      height - the height with unit (e.g., "100%", "200px")
      Returns:
      this element for method chaining

    • size

      public <T extends SvgElement> T size(double width, double height)
      Sets the size of the SVG element.
      Parameters:
      width - the width value
      height - the height value
      Returns:
      this element for method chaining

    • size

      public <T extends SvgElement> T size(String width, String height)
      Sets the size of the SVG element with units.
      Parameters:
      width - the width with unit (e.g., "100%", "200px")
      height - the height with unit (e.g., "100%", "200px")
      Returns:
      this element for method chaining

    • preserveAspectRatio

      public <T extends SvgElement> T preserveAspectRatio(SvgElement.PreserveAspectRatio ratio)
      Sets the preserveAspectRatio attribute.
      Parameters:
      ratio - the preserve aspect ratio setting
      Returns:
      this element for method chaining

    • preserveAspectRatio

      public <T extends SvgElement> T preserveAspectRatio(String ratio)
      Sets the preserveAspectRatio attribute with a custom value.
      Parameters:
      ratio - the preserve aspect ratio value
      Returns:
      this element for method chaining

    • setAttribute

      public com.vaadin.flow.dom.Element setAttribute(String attribute, String value)
      Overrides:
      setAttribute in class com.vaadin.flow.dom.Element

    • setWriteOnlyAttribute

      protected com.vaadin.flow.dom.Element setWriteOnlyAttribute(String attribute, String value)
      Sets an attribute using write-only optimization.

      Unlike setAttribute(String, String), this method does NOT store the attribute value on the server side. Instead, it batches attribute changes and sends them to the client via JavaScript execution just before the response is sent. This is more efficient for typical SVG usage where attributes are written once and never read back.

      Multiple changes to the same attribute within a single request-response cycle are coalesced, with only the final value being sent to the client.

      Parameters:
      attribute - the attribute name
      value - the attribute value
      Returns:
      this element for method chaining

    • scheduleBeforeClientResponse

      protected void scheduleBeforeClientResponse()

    • flushPendingAttributes

      protected void flushPendingAttributes()

    • getOuterHTML

      public String getOuterHTML()
      Overrides:
      getOuterHTML in class com.vaadin.flow.dom.Element

    • getStyle

      public VStyle getStyle()
      Overrides:
      getStyle in class com.vaadin.flow.dom.Element