1

我有一个圆，里面有一个边界环（绿色和静态），还有一些“脉冲”外圆（蓝色）。我将如何解决这个问题，只让静态圆圈内的“脉冲圆圈”部分可见？

我还包括了用于呈现 HTML 的 JS 供您参考，但它不会在 JSFiddle 中生成 SVG。

我认为 SVG 中存在图层，但考虑到我如何构建其他圆圈的渲染，这并不是很有帮助。 快速回顾一下它的工作方式。

  1. 用橙色渐变绘制背景圆，并在其上放置同心圆。
  2. 画出绿色的静态圆圈。
  3. 将四个脉冲放在笛卡尔平面的基点上。
  4. 动画脉冲。

我知道我可以在主圆圈的边界内测量一次点击，所以我希望我可以将脉冲的动画（可能是一种 hacky 方式）限制在绿色圆圈内。

也许放在顶部的其他圆圈具有反向填充或其他东西？只是吐出想法，因为我已经尝试了我所知道的一切并且找不到任何其他示例或想法研究。

可能会帮助您帮助我想到实现此目的的方法的相关文章：

如何计算（圆的）弧的 SVG 路径

4

1 回答 1

2

如果我理解正确，您希望将脉冲圆圈限制在绿色非脉冲圆圈的内部。这可以使用剪辑路径来完成：

<defs>
  <!-- ... -->
  <!-- Here we define the clip path, using the non-pulsing circle -->
  <clipPath id="ringClip">
    <use xlink:href="#ring-circle"/>
  </clipPath>
</defs>
<g>
  <!-- other content -->
  <!-- We put all pulsing circles into a group, 
       applying the clip path to them as a whole -->
  <g clip-path="url(#ringClip)">
    <!-- pulsing circles -->
  </g>
  <circle id="ring-circle"><!-- more attributes --></circle>
</g>

试试 jsFiddle

于 2013-01-08T12:00:37.220 回答