Question

我正在创建一个要添加到svg的clipPath元素。

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);

当渲染到dom时，它会将元素更改为小写clippath，svg无法识别（必须将其作为clipPath传播）。

我正在寻找一种方法来强制Chrome尊重camelcase。

Answer 1

你是什么意思＆＃34;不被svg＆＃34;？认可？对我而言，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>

我不确定为什么Dev-Tools的Elements面板显示没有驼峰的节点名称，但似乎这不会打扰你。 nodeName属性仍然是驼峰式的，并且序列化文档也会产生驼峰的情况。

Chrome并不尊重camelcase svg element＆＃34; clippath＆＃34;

1 个答案: