如何让 SVG 元素在路径上移动?
How can I make a SVG element to move on the path?
我想沿着 path
移动 rect
。因此,我翻译了 rect
,使其位置在 path
的开头。但是当我启动动画时,rect
翻译是相对于 path
解释的。因此 rect
会随着路径的平移偏移而移动。
这是一个例子:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px"
height="400px">
<defs />
<path id="path" d="M 100 100 L 100 15 L 500 15 L 500 150" fill="none" stroke="#000000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g transform="translate(50,75)">
<rect height="50" width="100" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
</rect>
<text x="15" y="28">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
</svg>
如何让rect
在路径上移动?
编辑
我正在寻找适用于多个不同路径的解决方案。例如
<svg viewBox="-100 -130 700 400">
<defs />
<path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<path id="path2" d="M 150 0 L 150 90 L -50 90 L -50 150" fill="none" stroke="#ff0000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
<text text-anchor="middle" dominant-baseline="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
<g>
<rect height="50" width="100" x="100" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
<text text-anchor="middle" x="150" dominant-baseline="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path2" />
</animateMotion>
</g>
</svg>
主要思想是让文本和矩形以点 x=0、y=0 为中心
<svg viewBox="-100 -130 700 400">
<defs />
<path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000"/>
<text text-anchor="middle" dominant-baseline="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
</svg>
好的,我想我明白了 now.You 在中心渲染一些元素,然后将其平移到您想要的位置。
<svg viewBox="0 0 800 500">
<defs />
<g transform="translate(100, 120)">
<path id="path" d="M 0 0 L 0 -85 L 500 -85 L 500 150" fill="none" stroke="#000000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
</rect>
<text dominant-baseline="middle" text-anchor="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
</g>
<g transform="translate(180, 200)">
<path id="path2" d="M 0 0 L 0 50 L 300 50 L 300 -100" fill="none" stroke="#000000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
</rect>
<text dominant-baseline="middle" text-anchor="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path2" />
</animateMotion>
</g>
</g>
</svg>
我想沿着 path
移动 rect
。因此,我翻译了 rect
,使其位置在 path
的开头。但是当我启动动画时,rect
翻译是相对于 path
解释的。因此 rect
会随着路径的平移偏移而移动。
这是一个例子:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600px"
height="400px">
<defs />
<path id="path" d="M 100 100 L 100 15 L 500 15 L 500 150" fill="none" stroke="#000000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g transform="translate(50,75)">
<rect height="50" width="100" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
</rect>
<text x="15" y="28">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
</svg>
如何让rect
在路径上移动?
编辑
我正在寻找适用于多个不同路径的解决方案。例如
<svg viewBox="-100 -130 700 400">
<defs />
<path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<path id="path2" d="M 150 0 L 150 90 L -50 90 L -50 150" fill="none" stroke="#ff0000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
<text text-anchor="middle" dominant-baseline="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
<g>
<rect height="50" width="100" x="100" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000" />
<text text-anchor="middle" x="150" dominant-baseline="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path2" />
</animateMotion>
</g>
</svg>
主要思想是让文本和矩形以点 x=0、y=0 为中心
<svg viewBox="-100 -130 700 400">
<defs />
<path id="path" d="M 0 0 L 0 -90 L 500 -90 L 500 150" fill="none" stroke="#ff0000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000"/>
<text text-anchor="middle" dominant-baseline="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
</svg>
好的,我想我明白了 now.You 在中心渲染一些元素,然后将其平移到您想要的位置。
<svg viewBox="0 0 800 500">
<defs />
<g transform="translate(100, 120)">
<path id="path" d="M 0 0 L 0 -85 L 500 -85 L 500 150" fill="none" stroke="#000000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
</rect>
<text dominant-baseline="middle" text-anchor="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path" />
</animateMotion>
</g>
</g>
<g transform="translate(180, 200)">
<path id="path2" d="M 0 0 L 0 50 L 300 50 L 300 -100" fill="none" stroke="#000000" stroke-width="3"
stroke-miterlimit="10" pointer-events="none" />
<g>
<rect height="50" width="100" x="-50" y="-25" fill="#FDD34D" rx="10" stroke-width="1px" stroke="#000000">
</rect>
<text dominant-baseline="middle" text-anchor="middle">Click me !</text>
<animateMotion id="move" dur="4.6s" begin="click">
<mpath xlink:href="#path2" />
</animateMotion>
</g>
</g>
</svg>