Style.toSVGFormat

Syntax

toSVGFormat(element: SVGElement);

Parameters

element. SVG element for which the style is applied.

Description

The toSVGFormat method applies a style to SVG element.

Comments

The method calls the identical method toSVGFormat for each separate style setting.

Example

To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. Create a div element and place a child svg element in it:

// Create div element
var divElem = PP.createElement(document.body);
// Set up styles for this element
divElem.style.cssText = "width: 200px; height: 100px; border: 1px solid rgb(102, 102, 102);";
// Create SVG element with rectangle
var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElem.setAttribute("width", "200");
svgElem.setAttribute("height", "100");
var rectElem = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectElem.setAttribute("x", "20");
rectElem.setAttribute("y", "20");
rectElem.setAttribute("width", "160");
rectElem.setAttribute("height", "60");
rectElem.setAttribute("fill", "#a3c8fc");
svgElem.appendChild(rectElem);
divElem.appendChild(svgElem);

After executing the example a div element is created in the document, in which a rectangle is placed:

Then create a border and define its settings for the rectangle placed in the div element:

// Create style
var style = new PP.Style();
var border = new PP.Border({
    "Width": 2,
    "Style": PP.BorderStyle.solid,
    "Color" : "FFFFFF"
});
style.setBorder(border);
// Determine style settings for ractangle
style.toSVGFormat(rectElem);

As a result black solid border with the width equal to 2 is set for the rectangle located in the div element: