Important Notice: Our web hosting provider recently started charging us for additional visits, which was unexpected. In response, we're seeking donations. Depending on the situation, we may explore different monetization options for our Community and Expert Contributors. It's crucial to provide more returns for their expertise and offer more Expert Validated Answers or AI Validated Answers. Learn more about our hosting issue here.

When I create new SVG elements or modify some SVG attributes through the DOM API, from ECMA Script, nothing happens, the changes are not rendered, why not?

April 26, 2017API create DOM ECMA elements Script SVG

0

Posted

When I create new SVG elements or modify some SVG attributes through the DOM API, from ECMA Script, nothing happens, the changes are not rendered, why not?

1 Answer

0

Posted

A common problem is that script contain the wrong DOM calls to create elements or modify attributes. SVG elements need to be created in the SVG namespace. For example, to create a element, you should use document.createElementNS(svgNS, “rect”), (where svgNS is equals to “http://www.w3.org/2000/svg”), which appropriately creates the element in the SVG namespace. A call to document.createElement(“rect”) creates an element with the tag rect but which does not belong to the SVG namespace. As such, it is ignored by Batik. Most SVG attributes belong to what is called the ‘per element type partition namespace’ (see the Namespaces in XML specification). The appropriate way to set attributes on an SVG element is a call to setAttributeNS with a namespace value of null, for example: elt.setAttributeNS(null, “width”, “40”). In the Batik SVG DOM implementation, you can also use a call to setAttribute and you can write elt.setAttribute(“width”, “40”). However, it is important to know t