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

Posted 2023-03-23

【中文标题】如果存在媒体查询，则 SVG 掩码不起作用

【英文标题】：SVG mask doesn't work if a media query is present

【发布时间】：2013-09-02 05:04:27

【问题描述】：

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

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

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

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

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

我需要它在 Chrome 中工作，并且不能删除 @media 查询。我还需要使use 元素起作用，因为D3 会自动调整extent 矩形的大小，而这就是我需要屏蔽掉的形状。

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

【参考方案1】：

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

【讨论】：

这里的问题是，在混合的某个地方，我几乎必须有一个 <use> 元素来引用范围 rect。 d3.brush 组件动态更新该矩形的大小和形状，我真的不想跟踪这些变化并更新自定义 path 元素作为响应。据我所知，clipPath 无法完成这项工作。