Class DiagramSvgElement

Represents a native SVG element that serves as a fundamental building block for diagram nodes in the DiagramElement hierarchy. To create a node, multiple diagram native elements can be combined.

Inheritance
System.Object
CommonElement
DiagramElement
DiagramSvgElement
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramSvgElement : DiagramElement
Remarks

This class extends DiagramElement to support native SVG rendering capabilities. Multiple elements can be combined to create complex diagram nodes with rich visual representations.

Examples

This example demonstrates how to create a svg shape.

<SfDiagramComponent Height="600px" Nodes="@nodes">
  <DiagramTemplates>
     <NodeTemplate>
     @{
       if ((context as Node).Shape.Type == NodeShapes.SVG)
       {
          <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
             <g fill="white" stroke="green" stroke-width="5">
                 <circle cx="40" cy="40" r="25" />
                 <circle cx="60" cy="60" r="25" />
             </g>
          </svg>
       }
      }
      </NodeTemplate>
    </DiagramTemplates>
</SfDiagramComponent>
@code{
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized(){
       Node node = new Node()
       {
          ID = "node1",
          Height = 100,
          Width = 100,
          OffsetX = 100,
          OffsetY = 100,
          Shape = new Shape() { Type = NodeShapes.SVG },
       };
      nodes.Add(node);
    }
}

Constructors

DiagramSvgElement()

Declaration
public DiagramSvgElement()