Question

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

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>

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

剪辑路径选择Chrome与Firefox

1 个答案: