動畫增長箭頭鏈接

您好，我想知道人們會如何去動畫的SVG箭頭像上面（懸停）。

我試着玩CSS轉換，但他們也縮放箭頭，這是不好的。我認爲正確的方法是使用SVG動畫，但我不知道從哪裏開始。例如，我會將以下箭頭（僅限線條）增長，然後箭頭向前移動。

<svg width="600px" height="100px"> 
    <defs> 
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> 
     <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> 
    </marker> 
    </defs> 

    <line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5"  marker-end="url(#arrow)" /> 
</svg>

任何幫助非常感謝！

來源

2017-03-02 phil

請提供代碼.. –

給我們一些代碼開始，以及什麼樣的動畫？ –

@MichaelCoker更新了代碼。我在上面爲動畫添加了兩張圖片。 – phil

您可以使用像這樣的「respoinsive」SVG創建增長的箭頭。

svg{ 
 
    width: 20px; 
 
    height: 20px; 
 
    transition:width 2s ease; 
 
    overflow: visible; 
 
} 
 
svg:hover{ 
 
    width: 100px; 
 
}

<svg> 
 
    <defs> 
 
    <marker id="m" markerWidth="4" markerHeight="8" 
 
    refX="0" refY="1" viewBox="0 0 1 2"> 
 
     <polygon points="0,0 1,1 0,2" fill="black"/> 
 
    </marker> 
 
\t </defs> 
 
    <line x1="0" y1="50%" x2="100%" y2="50%" 
 
    stroke-width="2" marker-end="url(#m)" stroke="black"/> 
 
</svg>

有實施的幾個問題。

svg沒有viewBox（所以它是「響應」SVG）。
箭頭線由（根）svg大小的相對位置定義。
箭頭由元素定義。
越來越多的動畫由CSS過渡定義，動畫寬度爲svg。所以，箭頭隨着svg的大小增長。

來源

2017-03-02 05:22:50 defghi1977

謝謝！這正是我所期待的！你能不能提出一個提示如何製作左向箭頭？ – phil

您應該創建另一個標記元素並將其設置爲'line'元素的'marker-start'屬性。 – defghi1977

你需要在'polygon'中添加'stroke =「none」'，否則IE會得到一個黑色的矩形而不是三角形。看到這個[回答]（https://stackoverflow.com/a/42140313/3448527） – dippas

爲了動畫的各個SVG元素，如HTML元素，你需要直接嵌入SVG到頁面這樣的：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" 
 
    xml:space="preserve" class="logo"> 
 

 
<ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/> 
 
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03 
 
    c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341 
 
    c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933 
 
    c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991 
 
    c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875 
 
    c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489 
 
    c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309 
 
    c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876 
 
    c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413 
 
    c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566 
 
    c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156 
 
    c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351 
 
    c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247 
 
    c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331 
 
    z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111 
 
    C434.693,207.929,439.613,203.01,445.731,203.01z"/> 
 
<filter id="pictureFilter" > 
 
    <feGaussianBlur stdDeviation="15" /> 
 
</filter> 
 
</svg>

這樣做了以後，就可以在任何單獨的SVG元素上使用CSS動畫，就像HTML元素一樣。例如，你可以做到以下幾點：

svg ellipse { animate: grow 3s infinite; }

而不必爲您的箭頭確切的SVG代碼，我不能給你提供更具體的方向，但可以爲您指出這篇文章的方向：https://css-tricks.com/using-svg/

來源

2017-03-02 04:20:06 KoldBane

動畫增長箭頭鏈接

回答

相關問題