如何使此动画绿色条仅在圆上可见？
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" xml:space="preserve">
<rect id="bar" y="10.962" fill="#02FF74" width="38" height="14.667">
Link to CodePen
最佳答案
使用clipPath可以创建遮罩。
您必须在<circle>标记内创建一个<defs>（它不会在其中渲染元素并使其可访问）
您必须创建一个clipPath，使用<use xlink:href="#circleID"...从圆中获取尺寸和位置
您应该将属性clipPath="url(#clipPathID)"添加到要屏蔽的任何元素或元素组中。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<defs>
<circle id="SVGID_1_" cx="19" cy="19" r="19"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" from="40" to="-15" restart="always" dur="2s" attributeName="y" calcMode="linear" additive="replace" accumulate="none" repeatCount="indefinite">
</animate>
</rect>
<g clip-path="url(#SVGID_2_)">
<path d="M19,4.191c8.166,0,14.809,6.643,14.809,14.809S27.166,33.809,19,33.809S4.191,27.165,4.191,19S10.834,4.191,19,4.191
M19,0C8.508,0,0,8.507,0,19s8.508,19,19,19c10.493,0,19-8.507,19-19S29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309S21.928,24.309,19,24.309S13.691,21.927,13.691,19S16.072,13.691,19,13.691
M19,9.5c-5.246,0-9.5,4.253-9.5,9.5s4.254,9.5,9.5,9.5s9.5-4.253,9.5-9.5S24.246,9.5,19,9.5L19,9.5z"/
</g>
</g>
</g>
</svg>刚刚进行了编辑，以将动画元素显示在圆圈的黑色填充内。该过程与前面的示例相同，但是现在已经创建了蒙版路径的形状，同时从两个黑眼圈中复制了
d=".."属性值：<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200" height="200" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<g>
<path d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809c-8.166,0-14.809-6.645-14.809-14.809
C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19c10.493,0,19-8.508,19-19
C38,8.507,29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19
C13.691,16.073,16.072,13.691,19,13.691 M19,9.5c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5
c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809
c-8.166,0-14.809-6.645-14.809-14.809C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19
c10.493,0,19-8.508,19-19C38,8.507,29.493,0,19,0L19,0z M19,13.691c2.928,0,5.309,2.381,5.309,5.309
c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19C13.691,16.073,16.072,13.691,19,13.691 M19,9.5
c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" attributeName="y" dur="2s" restart="always" to="-15" from="40">
</animate>
</rect>
</g>
</g>
</svg>关于javascript - 动画栏仅在圆上可见-SVG，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43589435/