Eyebrow raising animation with SVG path

问题

I am trying to animate eyebrows with SVG. But got stuck as I am not getting proper tutorial showing the meaning and use of numbers used in path="" (please share a tutorial link if you know any). Anyone please help me with raising the smiley's eyebrows. Here is my code

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

I was trying with following. Sorry for bad code :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>

回答1:

You can simply use the animateTransform since you are using transform for you path and you have to specify the type (here you can use translate) and the from and to in order to specify the start/end point of animation:

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

And as I described in my previous answer (SVG path positioning) for your question, you can use g element to be able to animate them both at the same time:

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

Here is some useful links :

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

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

来源：https://stackoverflow.com/questions/48162219/eyebrow-raising-animation-with-svg-path

标签

html

css

svg

path