仅查看 svg 圆的弧答案

【问题标题】：Only view arc of a svg circle仅查看 svg 圆的弧
【发布时间】：2012-12-22 01:56:25
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

标签： svg jquery-animate jquery-svg svg-animate

【解决方案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

【讨论】：

顺便说一句，对您的 JavaScript 代码的评论：您不需要 setAttribute('xmlns', xmlns) 和 setAttribute('xmlns:xlink', "w3.org/1999/xlink")。您正在使用createElementNS()，因此，所有内容都进入正确的命名空间而无需设置那些xmlns 属性。如果您没有将元素放入正确的命名空间，即如果您没有使用createElementNS()，那么xmlns 属性不会改变这一点。这些属性仅在编写 XML 代码时对建立命名空间有用，在某些环境中甚至不能作为属性访问，例如简单的 XSLT。