带有 SVG 路径的提眉动画

Question

我正在尝试使用 SVG 为眉毛设置动画。但是因为我没有得到正确的教程来显示path=""中使用的数字的含义和用法而被卡住了（如果你知道的话，请分享一个教程链接）。任何人都请帮助我提高笑脸的眉毛。 这是我的代码

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
 </svg> 

我正在尝试关注。抱歉代码不好：P

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <animateMotion 
									 xlink:href="#eyebrow1" 
									 dur="1.2s" 
									 fill="freeze"
									 calcMode="spline"
									 keyTimes="0; 0.5; 1"
									 keySplines="0 0 1 1;
															 .42 0 .58 1;"
									 path ="M30, 20 Q27, 10 35, 20"
									 />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
 </svg> 

Answer 1

你可以简单地使用animateTransform，因为你正在为你的路径使用转换，你必须指定类型（在这里你可以使用翻译）和from和to以指定开始/结束动画点：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow1"/>
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" id="eyebrow2"/>
  
 <animateTransform 
      xlink:href="#eyebrow1"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="9 17"
      to="9 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      />
       <animateTransform 
      xlink:href="#eyebrow2"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="40 17"
      to="40 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      />
 </svg>

正如我在之前的回答 (SVG path positioning) 中针对您的问题所描述的，您可以使用 g 元素同时为它们设置动画：

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
  <ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
  <g transform="translate(10,20)" id="eyebrow">

  <path d="M16, 20 Q27, 10 35, 20" fill="none" stroke="#000" stroke-width="1.5px" />
  <path d="M16, 20 Q27, 10 35, 20" transform="translate(30,0)" fill="none" stroke="#000" stroke-width="1.5px" />
  
  </g>
  
  <animateTransform 
      xlink:href="#eyebrow"
      attributeName="transform" 
      attributeType="XML"
      type="translate"
      from="10 15" 
      to="10 22" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      fill="freeze" 
      />
</svg>

这里有一些有用的链接：

https://css-tricks.com/guide-svg-animations-smil/

https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/