仅查看svg圆的圆弧

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

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

我认为SVG中存在层，但考虑到我如何构建其他圆的渲染，这不是很有帮助。

快速回顾它的工作方式

用橙色渐变绘制背景圆，并在其上放置同心圆

画一个绿色的静态圆圈

将四个脉冲放置在笛卡尔平面的基点上

为脉冲设置动画

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

可能是放在上面的另一个圆圈有反向填充或其他什么？只是随便说说，因为我已经尝试了我所知道的一切，找不到任何其他的例子或想法

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

---

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

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

---

顺便说一句，关于JavaScript代码的注释：您不需要

setAttribute（'xmlns'，xmlns）

和

setAttribute（'xmlns:xlink'，“w3.org/1999/xlink”）

。您使用的是

createElementNS（）

，因此，所有内容都指向正确的名称空间，而无需设置那些

xmlns

属性。如果没有将元素放入正确的名称空间，即如果没有使用

createElementNS（）

，则

xmlns

属性不会改变这一点。这些属性仅在编写XML代码时用于建立名称空间，在某些环境（如简单XSLT）中甚至不能作为属性访问。