Question

如何让这个动画绿色条仅在圆圈上可见？

<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

Answer 1

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

动画栏仅在圆圈上可见 - svg

1 个答案: