将clipPath应用于转换的g元素

时间:2013-01-22 10:49:09

标签: svg

我正在尝试剪辑一个圆圈,以便它只显示属于特定范围内的部分。但是,圆圈​​在转换的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>

我的问题的工作演示可以在这个小提琴中找到:http://jsfiddle.net/xRh6A/

我添加了两个圆圈。第一个被剪掉(因为剪辑路径属性已设置),第二个被显示但显然没有被剪裁。

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

编辑我通过放置带有绝对坐标的“网站”来解决它。但是,这意味着我无法使用d3.svg.arc(它在我附加的简化示例中生成代码),因为它在本地坐标系中创建了弧。

我仍然有兴趣看看它是否可以解决。

1 个答案:

答案 0 :(得分:14)

g元素上的翻译会影响clipPath的呈现方式。您有两个选择:

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

  2. clipPath元素上应用反向转换。我从来没有实现过这种方法,但我在这里读到了它:https://stackoverflow.com/a/16166249/3123187。每次更改clipPath转换时,此选项都要求您更新g转换。

  3. 如果您打算将g应用于{{1元素。

    clip-path

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

    如果您只打算将clipPath应用于第一个圈子,那么您只需添加一个中间容器元素。

    g#sites

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