Chrome doesn't respect camelcase for svg eleme

2019-08-10 23:04发布

站内问答 / JavaScript
1178 1 6

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.w3.org/2000/svg', 'clipPath');
svg.appendChild(clipElement);

When rendered to the dom, it changes the element to lowercase clippath, which isn't recognized by the svg (must be camelcased as clipPath).

I am looking for a way to force Chrome to respect the camelcase.

1条回答
太酷不给撩
2楼-- · 2019-08-10 23:20

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

<html>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <circle r="100" clip-path="url(#clip)"/>
    <rect width="90" height="90" fill="red"/>
  </svg>
  <script type="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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)