Javascript SVG线端点独立设置动画
我试图设置一个SVG线条端点的动画,使其沿特定路径移动,而另一个端点静止不动,因此线条在保持笔直的同时拉伸和收缩 到目前为止,我所取得的成就是使我的整条线沿着路径移动,其中一个端点绑定到它:Javascript SVG线端点独立设置动画,javascript,css,svg,Javascript,Css,Svg,我试图设置一个SVG线条端点的动画,使其沿特定路径移动,而另一个端点静止不动,因此线条在保持笔直的同时拉伸和收缩 到目前为止,我所取得的成就是使我的整条线沿着路径移动,其中一个端点绑定到它: A. B 对于您的特定示例,我们可以通过使用的值=“…”属性来实现 下面是演示: HTML: 这更加灵活,我们可以将amimate路径更改为:,也可以遵循此非线性路径: 回答得很好,很有帮助 <svg viewBox="0 0 500 500"> <path stroke="
A.
B
对于您的特定示例,我们可以通过使用的值=“…”
属性来实现
下面是演示:
HTML:
这更加灵活,我们可以将amimate路径更改为:
,也可以遵循此非线性路径:
回答得很好,很有帮助
<svg viewBox="0 0 500 500">
<path stroke="grey" fill="none" id="route" d="M50,25 l25,30 l-40,20 z" />
<circle cx="50" cy="25" r=5 fill="blue">
<animate attributeName="cx" values="50;75;35;50" dur="5s" repeatCount="indefinite" />
<animate attributeName="cy" values="25;55;75;25" dur="5s" repeatCount="indefinite" />
</circle>
<text x="50" y="25" text-anchor="middle" transform="translate(0,-7)">A
<animate attributeName="x" values="50;75;35;50" dur="5s" repeatCount="indefinite" />
<animate attributeName="y" values="25;55;75;25" dur="5s" repeatCount="indefinite" />
</text>
<circle cx="150" cy="50" r="5" fill="blue"> </circle>
<text x="145" y="40">B</text>
<line x1="50" y1="25" x2="150" y2="50" stroke="blue">
<animate attributeName="x1" values="50;75;35;50" dur="5s" repeatCount="indefinite" />
<animate attributeName="y1" values="25;55;75;25" dur="5s" repeatCount="indefinite" />
</line>
</svg>
<svg viewBox="0 0 500 500">
<path stroke="grey" fill="none" id="route" d="M50,25 l25,30 l-40,20 z" />
<circle id="circle_motion" r=5 fill="blue">
<animateMotion dur="5s" fill="freeze">
<mpath xlink:href="#route" />
</animateMotion>
</circle>
<rect id="BBox" x="" y="" width="" height=""></rect>
<text id="text_motion" x="50" y="25" text-anchor="middle" transform="translate(0,-7)">A
</text>
<circle cx="150" cy="50" r="5" fill="blue"> </circle>
<text x="150" y="50" text-anchor="middle" transform="translate(0,-7)">B</text>
<line id="line_motion" x1="50" y1="25" x2="150" y2="50" stroke="blue">
</line>
</svg>
const svg = document.querySelector('svg');
const animateElem = document.querySelector('animateMotion');
const circle_motion = document.querySelector('#circle_motion');
const text_motion = document.querySelector('#text_motion');
const line_motion = document.querySelector('#line_motion');
const BBox = document.querySelector('#BBox');
var myInterval;
function startFunction() {
const box = circle_motion.getBoundingClientRect();
var pt = svg.createSVGPoint();
pt.x = (box.left + box.right) / 2;
pt.y = (box.top + box.bottom) / 2;
var svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
//console.log(svgP.x,svgP.y)
text_motion.setAttribute('x', (svgP.x) );
text_motion.setAttribute('y', (svgP.y) );
line_motion.setAttribute('x1', (svgP.x) );
line_motion.setAttribute('y1', (svgP.y) );
}
function endFunction() {
clearInterval(myInterval)
}
animateElem.addEventListener('beginEvent', () => {
console.log('beginEvent fired');
myInterval = setInterval(startFunction, 10);
})
animateElem.addEventListener('endEvent', () => {
console.log('endEvent fired');
endFunction();
})