剪辑路径选择 铬与火狐

clip path selection Chrome vs. Firefox

本文关键字：火狐 选择 路径      更新时间：2023-09-26

下面的选择器在Chrome （38）上<defs>内找不到<clipPath>元素：

d3.selectAll('defs clipPath')

（这是 D3.js 代码，但我怀疑潜在的querySelectorAll问题）

它在火狐浏览器上运行良好。是否有不同的选择器语法可以在两个浏览器上使用？

在下面的 Firefox 示例中，您将看到整个文本，因为剪辑路径被删除了。但是在 Chrome 上，它将在 85 像素后被切断，因为剪辑路径未被删除。

d3.selectAll('defs clipPath').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="200" width="400">
  <defs>
    <clipPath id="clip1">
      <rect id='tt' x="0" y="0" width="85" height="15"></rect>
    </clipPath>
  </defs>
  <text clip-path="url(#clip1)" x="0" y="15">This text should all be visible once we remove the clip-path</text>
</svg>

正如Lars指出的那样，这是一个webkit错误，现在在Blink中它仍然存在为问题237435：querySelectorAll无法在HTML中找到SVG camelCase元素

因此，在修复之前，使用类选择器可能是最好的解决方法。

d3.selectAll('defs .clippy').remove();


d3.selectAll('defs .clippy').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="200" width="400">
  <defs>
    <clipPath id="clip1" class='clippy'>
      <rect id='tt' x="0" y="0" width="85" height="15"></rect>
    </clipPath>
  </defs>
  <text clip-path="url(#clip1)" x="0" y="15">This text should all be visible once we remove the clip-path</text>
</svg>

相关文章：