将clipPath应用于已转换的g元素 [英] Apply clipPath to transformed g element

问题描述

我正在尝试修剪一个圆圈，以便仅显示属于特定范围内的部分.但是，圆在被转换的g元素内.当我将剪切路径应用于g元素或该元素内的路径("g.site"或"g.site path")时，完整的圆会被剪切掉.显示我的问题的简短示例:

I'm trying to clip a circle so that it only shows for the part that falls within certain bounds. However, the circle is within a g element that is transformed. When I apply the clip path to either the g element or the path within this element ("g.site" or "g.site path") the circle complete gets clipped off. Short example showing my problem:

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

可以在以下小提琴中找到我的问题的有效演示: http://jsfiddle.net/xRh6A/

A working demo of my problem can be found in this fiddle: http://jsfiddle.net/xRh6A/

我添加了两个圈子.第一个被剪掉(因为设置了clip-path属性)，第二个被显示，但是(显然)没有被剪掉.

I added two circles. The first one is clipped off (because the clip-path attribute is set), the second is shown but (obviously) not clipped.

我想这与以下事实有关:剪切路径是绝对定义的，而圆元素具有局部坐标，然后进行变换.是否可以将clipPath与转换后的组一起使用，还是必须更改剪辑路径或圆形路径才能使其匹配?

I suppose this is related to the fact that the clip-path is defined in absolute terms while the circle element has local coordinates and is then transformed. Can I use the clipPath with a transformed group or do I have to either change the clip path or the circle path in order to make them match?

编辑我通过将站点"放置在绝对坐标中来解决了该问题.但是，这意味着我不能使用d3.svg.arc(它在我所附的简化示例中生成代码)，因为它会在局部坐标系中创建弧.

Edit I solved it by placing the "sites" with absolute coordinates. However, this meant that I couldn't use d3.svg.arc (which is generating the code in the simplified example I attached) because it creates arcs in a local coordinate system.

我仍然很想知道是否也可以解决它.

I'd still be interested to see if it could be solved otherwise as well.

推荐答案

您对g元素的翻译会影响clipPath的呈现方式.您有2个选择:

Your translation on the g element is affecting how the clipPath is rendered. You have 2 options:

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

1. Add the clip-path attribute to a static parent element. You can then apply your translation on the child element without it affecting the clipPath rendering.

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

Apply the inverse translation on the clipPath element. I've never implemented this method, but I read about it here: https://stackoverflow.com/a/16166249/3123187. This option requires that you update the clipPath tranform each time you change the g transform.

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

In your case, you already have a parent g element so you can add the clip-path attribute there, if you intend to apply the clipPath to every element in your g#sites element.

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

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

如果仅打算将clipPath应用于第一个圆，则只需添加一个中间容器元素.

If you only intend for that clipPath to be applied to the first circle, you'd just add an intermediate container element.

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

这篇关于将clipPath应用于已转换的g元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！