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

Question

我正在尝试剪辑一个圆圈，以便它只显示落在特定范围内的部分。但是，该圆位于经过变换的 g 元素内。当我将剪辑路径应用于 g 元素或此元素内的路径(“g.site”或“g.site 路径”)时，圆完整被剪掉。显示我的问题的简短示例:

<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 属性)，第二个被显示但(显然)没有被剪掉。

我想这与以下事实有关，即剪辑路径是以绝对形式定义的，而圆元素具有局部坐标，然后进行了变换。我可以将剪辑路径与转换后的组一起使用，还是必须更改剪辑路径或圆形路径才能使它们匹配？

编辑 我通过放置具有绝对坐标的“站点”来解决它。但是，这意味着我不能使用 d3.svg.arc(它在我附加的简化示例中生成代码)，因为它在局部坐标系中创建弧。

我仍然有兴趣看看它是否也可以通过其他方式解决。

Answer 1

您在 g 上的翻译元素如何影响 clipPath被渲染。您有 2 个选择:

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

在 clipPath 上应用逆向平移元素。我从未实现过这种方法，但我在这里读到了它:https://stackoverflow.com/a/16166249/3123187 .此选项要求您更新 clipPath每次更改 g 时都进行转换转变。

就您而言，您已经有一个父级 g元素，以便您可以添加 clip-path那里的属性，如果您打算应用 clipPath到您 g#sites 中的每个元素元素。

<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>

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

如果您只打算这样做 clipPath要应用于第一个圆，您只需添加一个中间容器元素。

<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/)