将clipPath应用于转换后的g元素

Question

我想要裁剪一个圆形，使其仅显示在特定范围内。但是这个圆形位于被转换的g元素中。当我将剪辑路径应用于g元素或该元素内的路径（“g.site”或“g.site path”）时，整个圆形都被剪切掉了。以下是展示我的问题的简短示例：

<svg width="600" height="600">
  <defs>
    <clipPath id="myClip">
      <path d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z"
      />
    </clipPath>
  </defs>
  <g id="voronoi">
    <g id="cells">
      <path class="cell" d="M435.1256860398758,144.76407538624122L419.76193083948306,273.83328117717105L469.9933509829825,301.0396981292212L483.3234271019269,296.67464757752555L535.23683445551,247.72472220603692L574.3496211247055,127.3184557867296Z"
      />
    </g>
    <g id="sites">
      <g class="site" transform="translate(483.29548177370367,267.14072835257724)" clip-path="url(#myClip)">
        <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z"
        />
      </g>
      <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
        <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z"
        />
      </g>
    </g>
  </g>
</svg>

我在这个fiddle中找到了一个可以工作的演示：http://jsfiddle.net/xRh6A/

我添加了两个圆。第一个被剪切掉了（因为设置了clip-path属性），第二个则显示出来但（显然）没有被剪切。

我认为这与clip-path以绝对值定义而circle元素具有本地坐标并进行变换有关。我能否使用带有变换的组来使用clipPath，还是必须改变剪切路径或圆形路径以使它们匹配？

编辑 我通过放置具有绝对坐标的"sites"来解决了这个问题。然而，这意味着我不能使用d3.svg.arc（它生成我附加的简化示例中的代码），因为它会在本地坐标系中创建弧线。

如果有其他方法解决它，我仍然会感兴趣。

- Bertjan Broeksema

Answer 1

您在 g 元素上的翻译影响了如何呈现 clipPath。您有两个选项：

1. 将 clip-path 属性添加到静态父元素中。然后，您可以在子元素上应用您的翻译，而不会影响 clipPath 的呈现。

2. 对 clipPath 元素应用反向翻译。我从未实现过这种方法，但在这里阅读了一下：https://stackoverflow.com/a/16166249/3123187。此选项要求您每次更改 g 变换时更新 clipPath 变换。

在您的情况下，您已经有一个父级 g 元素，因此，如果您打算将 clipPath 应用于您的 g#sites 元素中的每个元素，则可以在那里添加 clip-path 属性。

<g id="sites" clip-path="url(#myClip)">
  <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
    <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" />
  </g>
  <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
    <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" />
  </g>
</g>

如果你只想将clipPath应用于第一个圆形，你只需要添加一个中间容器元素。

(jsfiddle: http://jsfiddle.net/SWyeD/)

<g id="sites">
  <g clip-path="url(#myClip)">
    <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
      <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" />
    </g>
  </g>
  <g class="site" transform="translate(483.29548177370367,267.14072835257724)">
    <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" />
  </g>
</g>

(jsfiddle: http://jsfiddle.net/bdB65/)

[jsfiddle：http://jsfiddle.net/bdB65/]

- bfin