是否有可能创建动画，其中Html标签将遵循svg路径动画?

Question

我正在使用svg路径在javascript中创建自定义进度动画。我从后端得到关于路径应该移动多少的数据。它工作得很好，但在动画完成的地方，我需要一些百分比文本。我知道可以用svg文本做到这一点，但这在样式上是有限的。(我可以样式它只作为svg)所以我的问题是:是否有可能创建动画Html标签，例如p将遵循svg路径动画?或者我有什么其他的解决办法吗?Svg路径没有规则的形状。

Answer 1

我举了两个例子。第一个是"only"使用SVG元素，下一个有一个<foreignObject>和一个HTML<span>。

在这个例子中，<text>是遵循一个动画的运动路径。必须更新属性keyPoints和end，使文本遵循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>

这里我用<foreignObject>做了一个例子。为了让它移动，我必须创建一个父元素(<g>)，因为我不能在<foreignObject>本身上做动画。

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>