Question

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

我还包含了JS，它提供HTML作为参考，但它不会在JSFiddle中生成SVG。

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

用橙色渐变绘制背景圆圈，同心圆上有圆圈。
绘制绿色静态圆圈。
将四个脉冲放在笛卡尔平面的基点上。
为脉冲制作动画。

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

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

相关文章可能会帮助我想出一种方法来实现这一目标：

How to calculate the SVG Path for an arc (of a circle)

Answer 1

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

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

Try on jsFiddle

仅查看svg圆弧

1 个答案: