剪辑路径选择 Chrome 与 Firefox答案

【问题标题】：clip path selection Chrome vs. Firefox剪辑路径选择 Chrome 与 Firefox
【发布时间】：2015-01-12 08:28:59
【问题描述】：

以下选择器在 Chrome (38) 上的 <defs> 内找不到 <clipPath> 元素：

d3.selectAll('defs clipPath')

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

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

在下面的 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>

【问题讨论】：

这是webkit bug。分配一个 ID 或类来代替。

标签： javascript google-chrome svg d3.js

【解决方案1】：

正如 Lars 指出的，这是一个 webkit bug，现在在 Blink 中它仍然以 Issue 237435: querySelectorAll unable to find SVG camelCase elements in HTML 存在

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

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>

【讨论】：