带有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因为您正在为路径使用transform，并且必须指定类型（在这里可以使用translate）以及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路径定位 ）中对您的问题所述，您可以使用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/