1

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

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

而不是像在大多数 D3 示例中那样将画笔范围呈现为矩形顶部的半透明覆盖，而是尝试从半透明覆盖中“切出”范围，以便画笔区域显示下面的真实颜色。根据这个问题，我正在尝试使用一个元素来执行此操作，并使用一个引用范围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 错误，我已在此处提交@media，如果CSS 中有查询，它会阻止应用掩码。你可以在这里看到工作版本和失败版本（在 Chrome 中失败，在 FF 中工作）。

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

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

4

1 回答 1

0

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

于 2013-08-30T11:05:44.750 回答