Question

TL; DR ：我需要根据另一个现有矩形的大小和位置来屏蔽SVG中一个矩形的一部分，该矩形将动态变化。 Chrome错误阻止了我尝试的mask + use方法。 如何根据现有形状执行蒙版或倒置剪辑路径？

完整概述 我正在使用D3.js，我使用brush控件将一个画笔添加到嵌入式SVG中的矩形。默认情况下，这会向SVG添加一些额外元素，包括rect类extent，其中显示了拉丝区域的大小。

在大多数D3示例中，我不是将画笔范围渲染为矩形顶部的半透明叠加层，而是尝试从半透明叠加层“剪切”范围，以便画笔区域显示下面的真实颜色。根据{{3}}，我尝试使用mask元素执行此操作，并使用引用范围的子use元素。有了一些D3魔法，我现在有了这样的结构：

<svg width="100" height="100">
  <g class="brush-layer inverted">
    <defs>
      <mask id="mask835">
        <rect fill="#fff" width="100%" height="100%"></rect>
        <use fill="#000" xlink:href="#extent848"></use>
      </mask>
    </defs>
    <g class="brush" style="pointer-events: none;">
      <rect class="overlay" mask="url(#mask835)" width="100%" height="17"></rect>
      <rect class="extent" x="30" width="52" height="17" id="extent848"></rect>
    </g>
  </g>
</svg>

这很有用......有点儿。事实证明，似乎有一个棘手的Chrome错误，this question，如果CSS中有@media查询，则会阻止应用掩码。您可以看到I've filed here和working version here（在Chrome中失败，在FF中运行）。

我需要在Chrome中使用此功能，并且无法删除@media查询。我还需要使use元素有效，因为D3会自动调整extent矩形的大小，这就是我需要掩盖的形状。

那么，如何在不使用上述rect + rect策略的情况下，根据另一个mask屏蔽掉一个use的一部分？< /强>

Answer 1

一种可能的解决方法可能是使用自定义剪辑路径，但它可能不会那么优雅。有关如何使用clip-path执行此操作的一些示例可以在this question中找到。

如果存在媒体查询，则SVG掩码不起作用

1 个答案: