SVG CSS動畫明星閃閃發光朝0,0點移動

我正在嘗試使用css中閃爍的動畫製作svg明星。SVG CSS動畫明星閃閃發光朝0,0點移動

事情是在動畫過程中，明星向svg的0,0位置移動。我希望明星在動畫期間保持原位。

我在猜測的是，在動畫過程中不使用星形（在路徑中）的每個點的位置。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
<g> 
    <rect fill="#009eff" height="351.7699" width="300.36301" class="color-fill"/> 
    <path class="glittering" fill="#ffcc00" d="m270.88123,28.60792l-7.20074,6.20193l1.02679,9.44777l-8.12354,-4.93181l-8.66808,3.89605l2.18013,-9.24996l-6.38396,-7.03987l9.47093,-0.78498l4.72256,-8.24694l3.67325,8.76482l9.30264,1.94299z"/> 
</g> 
</svg>

我做了一個codepen，以便你能明白我的意思。

codepen

你能幫助我的社區？非常感謝！

來源

2014-09-04 Tom

我想你需要做變換出身的東西。要麼這樣做，要麼改變你的道路，使它集中在原點上。已經有很多關於stackoverflow的轉換問題/答案。 – 2014-09-04 09:36:30

當您縮放星標時，您實際上將所有路徑座標乘以縮放因子。由於路徑座標距離原點都有一段距離，因此恆星正在移動。

您需要定義明星座標爲中心的由來，然後用<g>元素用合適的變換到公園，在那裏你真正想要成爲明星。

假設您打算在此圖片中擁有多個明星，我建議您在<defs>部分中定義明星形狀。這會讓你的SVG更容易與工作：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <path id="star1" fill="#ffcc00" d="M0.000-10L2.939-4.05L9.511-3.09L4.755 1.55L5.878 8.09L0 5L-5.878 8.09L-4.755 1.55L-9.511 -3.09L-2.939-4.05L0-10Z"/> 
    </defs> 
    <g> 
    <rect fill="#009eff" height="100" width="300" class="color-fill"/> 
    <g transform="translate(200,30)"> 
     <use xlink:href="#star1" class="glittering"/> 
    </g> 
    <g transform="translate(100,60)"> 
     <use xlink:href="#star1" class="glittering"/> 
    </g> 
    </g> 
</svg>

Updated copepen link here

來源

2014-09-04 09:51:42

好吧，我明白這個問題。我現在可以編輯我的所有項目。非常感謝這個快速回答！ – Tom 2014-09-04 09:59:35

我還有一個問題。你是如何編輯星形路徑以便它以0,0原點開始的？你有這個工具嗎？ – Tom 2014-09-04 10:45:44

@ user2203299我剛寫了一個簡單的程序來計算座標。已經刪除了，但它是這樣的：'r = 10：對於j = 0到2 * pi步進pi/5：print sin（j）* r，-cos（j）* r：r = 15-r ：下一個j' – 2014-09-04 10:56:14

SVG CSS動畫明星閃閃發光朝0,0點移動

回答

相關問題