Chrome 不尊重 svg 元素“clippath”的驼峰式

【问题标题】：Chrome doesn't respect camelcase for svg element "clippath"Chrome 不尊重 svg 元素“clippath”的驼峰式
【发布时间】：2014-03-12 16:05:05
【问题描述】：

我正在创建一个 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);

当渲染到 dom 时，它会将元素更改为小写的 clippath，这不被 svg 识别（必须驼峰化为 clipPath）。

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

【问题讨论】：

标签： javascript html svg

【解决方案1】：

“svg 无法识别”是什么意思？对我来说，一切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 属性仍然是驼峰式，序列化文档也会产生驼峰式。

【讨论】：