toSVGFormat(element: SVGElement);
element. SVG element for which the style is applied.
The toSVGFormat method applies a style to SVG element.
The method calls the identical method toSVGFormat for each separate style setting.
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:
See also: