Is it possible create animation where Html tag will follow svg path animation?-CodePudding

I am creating custom progress animation in javascript using svg path. I get data from backend about how much path should move. It is working fine but in that place where animation finish I need some text with percentage. I know it is possible to do it with svg text but that is limited in styling. (I can style it only as svg) So my question is: Is it possible create animation where Html tag for example p will follow svg path animation? Or any other ideas how I could fix it? Svg path doesn't have regular shape.

CodePudding user response：

I have made two examples. The first one is "only" using SVG elements, the next has a <foreignObject> with a HTML <span>.

In this example the <text> is following an animate motion path. The attributes keyPoints and end must be updated to make the text follow the stroke-dasharray:

var path = document.getElementById('path');
var text = document.getElementById('text');
var motion = document.getElementById('motion');

document.forms.rangeform.range.addEventListener('change', e => {
  path.style.strokeDasharray = `${e.target.value} 100`;
  text.textContent = `${e.target.value}%`;
  motion.attributes['keyPoints'].value = `${e.target.value/100};${e.target.value/100}`;
  motion.attributes['end'].value = `${e.target.value}ms`;
});

<form name="rangeform">
  <input type="range" name="range" min="0" max="100" value="75">
</form>
<svg viewBox="0 0 120 80" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="path2" d="M 10 50 C 20,50 25,30 50,30 S 80,50 80,50"
      pathLength="100" stroke-linecap="round" fill="none" />
  </defs>
  <use href="#path2" stroke-dasharray="none" stroke="lightblue" stroke-width="2" />
  <use href="#path2" id="path" stroke-dasharray="75 100" stroke-dashoffset="0"
    stroke="navy" stroke-width="4" />
  <text style="font-family:sans-serif;font-size:8px;font-weight:bold;"
    transform="translate(0 -5)">
    <tspan id="text">75%</tspan>
    <animateMotion id="motion" rotate="0" begin="0s" dur="100ms"
      end="75ms" keyPoints=".75;.75" keyTimes="0;1" fill="freeze">
      <mpath href="#path2"/>
    </animateMotion>
  </text>
</svg>

Here I have made an example with <foreignObject>. To make it move I had to create a parent element (<g>) because I'm not able to do an animation on the <foreignObject> itself.

var path = document.getElementById('path');
var text = document.getElementById('text');
var motion = document.getElementById('motion');

document.forms.rangeform.range.addEventListener('change', e => {
  path.style.strokeDasharray = `${e.target.value} 100`;
  text.textContent = `${e.target.value}%`;
  motion.attributes['keyPoints'].value = `${e.target.value/100};${e.target.value/100}`;
  motion.attributes['end'].value = `${e.target.value}ms`;
});

span {
  font-size: 8px;
  font-family: sans-serif;
  font-weight: bold;
}

<form name="rangeform">
  <input type="range" name="range" min="0" max="100" value="75">
</form>
<svg viewBox="0 0 120 80" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="path2" d="M 10 50 C 20,50 25,30 50,30 S 80,50 80,50"
      pathLength="100" stroke-linecap="round" fill="none" />
  </defs>
  <use href="#path2" stroke-dasharray="none" stroke="lightblue" stroke-width="2" />
  <use href="#path2" id="path" stroke-dasharray="75 100" stroke-dashoffset="0"
    stroke="navy" stroke-width="4" />
  <g>
    <foreignObject width="30" height="20" transform="translate(0 -20)">
      <span id="text" xmlns="http://www.w3.org/1999/xhtml">75%</span>
    </foreignObject>  
    <animateMotion id="motion" rotate="0" begin="0s" dur="100ms"
      end="75ms" keyPoints=".75;.75" keyTimes="0;1" fill="freeze">
      <mpath href="#path2"/>
    </animateMotion>
  </g>
</svg>