SVG坐标 - 面具＆amp;使用＆amp; 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>元素，其中包含一个矩形。还有一种情况是，堆叠的相同路径一个在另一个之下。为实现此目的，我使用 y属性作为其中一个<use>元素。

问题

不幸的是，当我更改y的{​​{1}}坐标时，附加到它的<use>也会更改其<mask>坐标。 y元素和其他元素都不会出现这种情况。

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

<use>

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/