試圖讓云在 SVG 的路徑上移動，但是當我做所有事情時，云從視圖部分移開......不知道為什么會發生這種情況。
[這是在代碼筆上][1]
enter code here[1]：https : //codepen.io/paul-santi/pen/MWvMaKp
uj5u.com熱心網友回復：
導致問題的是轉換。云和云路徑上的變換將云推離您想要的影片位置。
修理
首先，當云沿著路徑移動時，云與原點 (0,0) 的任何 X、Y 偏移都將被包括在內。所以你需要做的第一件事就是移動你的云，使它們位于 (0,0)。
我為解決這個問題所做的快速修復是通過在內部插入一個組元素來將變換添加回原點 #Cloued2
Updated codepen: https://codepen.io/PaulLeBeau/pen/WNEVbrO
<g id="cloued2" transform="translate(0 0)">
<g transform="translate(-1270,-307)">
<circle id="Ellipse_1-2" data-name="Ellipse 1" r="36" transform="translate(1198 325)" fill="#fff"/>
<circle id="Ellipse_2-2" data-name="Ellipse 2" r="36" transform="translate(1234 325)" fill="#fff"/>
<circle id="Ellipse_3-2" data-name="Ellipse 3" r="36" transform="translate(1270 325)" fill="#fff"/>
<circle id="Ellipse_4-2" data-name="Ellipse 4" r="36" transform="translate(1306 325)" fill="#fff"/>
<circle id="Ellipse_5-2" data-name="Ellipse 5" r="36" transform="translate(1342 325)" fill="#fff"/>
<circle id="Ellipse_6-2" data-name="Ellipse 6" r="36" transform="translate(1306 289)" fill="#fff"/>
<circle id="Ellipse_7-2" data-name="Ellipse 7" r="36" transform="translate(1270 289)" fill="#fff"/>
<circle id="Ellipse_8-2" data-name="Ellipse 8" r="36" transform="translate(1234 289)" fill="#fff"/>
</g>
</g>
下一個問題是transform那個#Path_Cloued2有。Anime.js 將讀取路徑定義，但不會考慮 tht 轉換。因此，云將在頁面上的其他地方設定影片。
為了解決這個問題，我洗掉了transform并調整了路徑定義以進行補償。
老的
<path id="Path_cloued2" data-name="Path cloued2" d="M2323,184l712-25-328,75Z" transform="translate(-2069 114)" fill="none" stroke="#707070" stroke-width="1"/>
新的
<path id="Path_cloued2" data-name="Path cloued2" d="M254,298 l 712-25 -328,75Z" fill="none" stroke="#707070" stroke-width="1"/>
現在，云遵循路徑。它仍然會做一些奇怪的事情，但我懷疑這只是調整影片配置的問題。IE。放慢速度，并將緩動函式更改為線性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/372307.html
上一篇：帶有影像和填充的SVG剪切路徑