Chrome浏览器不支持svg元素“ clippath”的驼峰式

Question

I am creating a clipPath element to add to an svg. 我正在创建一个clipPath元素添加到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). 呈现给dom时，它将元素更改为小写的clippath，而svg无法识别该路径（必须将其驼峰化为clipPath）。

I am looking for a way to force Chrome to respect the camelcase. 我正在寻找一种迫使Chrome浏览器尊重骆驼保护套的方法。

Answer 1

What do you mean by "isn't recognized by the svg"? 您的“ 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. nodeName属性仍然是驼峰大小写，并且序列化文档也会产生驼峰大小写。

Chrome浏览器不支持svg元素“ clippath”的驼峰式

问题描述

1 个解决方案

解决方案1
0 2014-03-12 08:05:05

Chrome浏览器不支持svg元素“ clippath”的驼峰式

问题描述

1 个解决方案

解决方案1 0 2014-03-12 08:05:05

解决方案1
0 2014-03-12 08:05:05