SVG 坐标 - mask & use & x/y 属性组合

Question

我对 SVG 坐标有疑问。我确定这不是错误，并且可能在文档中的某处进行了解释，因此我不质疑它。但是根据我的需要，我找不到其他方法来解决问题。进入正题

TL;DR

在SVG中，这个

<mask id="myMask" x="0" y="0">
  ...
</mask>
<use xlink:href="..." x="100" y="100" mask="#myMask">

改变 <use> x （或 y）位置连同 <mask> x（或y）位置。

我想将 <mask> 保留在原位。

更长的解释

背景

在我的网络应用程序中，我有一个 SVG 路径。我在多个地方使用它，所以我决定使用 <use> 元素。现在，在某些地方我想隐藏部分路径，所以我使用 <mask> element 和一个矩形。还有一种情况是，有一堆相同的路径一个放在另一个下面。为此，我对 <use> 元素之一使用了 y 属性。

问题

不幸的是，当我更改 <use> 的 y 坐标时，附加到它的 <mask> 也会更改其 y 坐标。这种情况不会发生在 <path> 元素或其他元素上。

下面是一个示例（为简单起见，我使用了 <rect> 个元素）。
运行看到四个并排放置的方块（两个红色和两个黄色）的片段。灰色叠加层代表蒙版的边界。正方形看起来更像矩形，因为它们的高度被 <mask> 切成了一半。正如您在代码中看到的，红色方块由 <use> 元素导入，黄色方块直接由 <rect> 元素放置。第二个和第四个方格也都向下移动了 500 个单位。 第二个方块清楚地代表了我的问题。它应该像第四个方块一样切割，但我需要按照 <use> 的方式进行切割。

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" viewBox="0 0 4000 1000">
    <defs>
        <rect id="svgRect" width="1000" height="1000"></rect>
        <mask id="svgIconMask10">
            <rect x="0" y="0" width="4000" fill="#ffffff" height="500"></rect>
        </mask>
    </defs>
    
    <!-- Rectangle 1 -->
    <use xlink:href="#svgRect" y="0" fill="#E5584C" mask="url(#svgIconMask10)"></use>
    
    <!-- Rectangle 2 -->
    <use xlink:href="#svgRect" x="1000" y="300" fill="#E5584C" style="mask: url(#svgIconMask10);"></use>
    
    <!-- Rectangle 3 -->
    <rect x="2000" y="0" width="1000" height="1000" fill="#E5D24C" style="mask: url(#svgIconMask10);"></rect>
    
    <!-- Rectangle 4 -->
    <rect x="3000" y="300" width="1000" height="1000" fill="#E5D24C" style="mask: url(#svgIconMask10);"></rect>
    
    
    <!-- Mask area boundaries -->
    <rect fill="transparent" stroke="#000" stroke-width="6px" x="0" y="0" width="4000" height="500" />
</svg>

Answer 1

您可以将遮罩应用到 <g /> 元素并让 <use /> 独立定位：

<g  style="mask: url(#svgIconMask10);">
  <use xlink:href="#svgRect" x="1000" y="300" fill="#E5584C"></use>
</g>

http://jsfiddle.net/yb1q8dwh/

SVG 坐标 - mask & use & x/y 属性组合

SVG coordinates - mask & use & x/y attribute combined

html

svg

TL;DR

更长的解释

背景

问题