Chrome不尊重svg元素"clippath"的驼色大小写

Chrome doesn't respect camelcase for svg element "clippath"

本文关键字：quot 大小写 clippath svg 元素 Chrome      更新时间：2023-09-26

我正在创建一个要添加到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尊重骆驼的情况。

你说的"不被svg识别"是什么意思?对我来说，一切都如我所愿:

<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的元素面板显示节点名称没有驼峰的情况下，但似乎这并不打扰你。nodeName属性仍然是驼峰大小写，同样序列化文档也会产生驼峰大小写。

相关文章：