Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Svg

Chrome Doesn't Respect Camelcase For Svg Element "clippath"

Post a Comment
I am creating a clipPath element to add to an svg. var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); var clipElement = document.createElementNS('http://www.w

Solution 1:

What do you mean by "isn't recognized by the svg"? For me, everything works as expected:

<html><body><svgxmlns="http://www.w3.org/2000/svg"><circler="100"clip-path="url(#clip)"/><rectwidth="90"height="90"fill="red"/></svg><scripttype="application/javascript">var clipPath = document.createElementNS("http://www.w3.org/2000/svg","clipPath");
    clipPath.id="clip";
    clipPath.appendChild(document.querySelector("rect"));
    document.querySelector("svg").appendChild(clipPath);
    alert(clipPath.nodeName);
  </script></body></html>

I'm not sure why the Elements panel of the Dev-Tools shows the node name without camel case, but it seems this does not have to disturb you. The nodeName property is still camel case, and also serializing the document will yield camel case.

Post a Comment for "Chrome Doesn't Respect Camelcase For Svg Element "clippath""