我试图让一个svg对象跟随一个路径,当我使用下面的代码时,它工作正常:
<svg x="0px" y="0px" viewBox="0 0 600 800">
<style>
svg {
fill: none;
stroke: black;
}
#arrow {
transform-origin: center;
transform-box: fill-box;
animation: followPath 5s infinite;
offset-path: path("M-54.918,380.7l285.5,0.5l0.5,354.5l173.1-0.1V480.1h181.5");
}
@keyframes followPath {
0% {offset-distance: 100%;}
100% {offset-distance: 0%;}
}
</style>
<polygon id="arrow" points="574.857,479.816 585.682,473.566 596.507,467.316 596.507,479.816 596.507,492.316 585.682,486.066" />
</svg>
但是当我尝试使用通过url的路径时,我什么也得不到:
<svg x="0px" y="0px" viewBox="0 0 600 800">
<style>
svg {
fill: none;
stroke: black;
}
#arrow {
transform-origin: center;
transform-box: fill-box;
animation: followPath 5s infinite;
offset-path: url(#guide);
}
@keyframes followPath {
0% {offset-distance: 100%;}
100% {offset-distance: 0%;}
}
</style>
<path id="guide" d="M-54.918,380.7l285.5,0.5l0.5,354.5l173.1-0.1V480.1h181.5" />
<polygon id="arrow" points="574.857,479.816 585.682,473.566 596.507,467.316 596.507,479.816 596.507,492.316 585.682,486.066" />
</svg>
必须把路径直接放在元素上对我来说没有好处,我需要引用现有的路径,任何帮助都非常感谢,谢谢。
1条答案
按热度按时间cx6n0qe31#
一个备用方法是将svg放在另一个文件中,然后在
url(..)
参数中调用它。