애니메이션 성장 화살표 링크

안녕, 난 (마우스 오버) 하나는 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 크기의 상대 위치로 정의됩니다.
화살표 머리는 요소로 정의됩니다.
성장하는 애니메이션은 svg의 애니메이션 폭을 갖는 CSS 전환으로 정의됩니다. 따라서 화살표는 svg 크기로 커집니다.

출처

2017-03-02 05:22:50 defghi1977

감사합니다! 이것은 내가 찾고 있었던 바로 그 것이다! 왼쪽 방향의 화살표를 만드는 방법에 대한 힌트를 줄 수 있습니까? – phil

다른 마커 요소를 만들고 이것을'line' 요소의'marker-start' 속성으로 설정해야합니다. – defghi1977

'polygon'에'stroke = "none"'을 추가해야합니다. 그렇지 않으면 IE는 삼각형 대신 검은 색 사각형을 갖게됩니다. 이 [답변] (https://stackoverflow.com/a/42140313/3448527)을 참조하십시오. – dippas

HTML 요소와 같은 개별 SVG 요소를 애니메이션하기 위해, 당신은 같은 페이지에 직접 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>

을 이렇게하면, 당신이 할 수있는 HTML 요소와 마찬가지로 개별 SVG 요소 중 하나에서 CSS 애니메이션을 사용하십시오. 예를 들어, 다음 작업을 수행 할 수 있습니다 : 당신의 화살표의 정확한 SVG 코드를하지 않고

svg ellipse { animate: grow 3s infinite; }

을, 난 당신보다 더 구체적인 방향을 제시 할 수는 없지만이 문서의 방향을 가리킬 수 있습니다 https://css-tricks.com/using-svg/

출처

2017-03-02 04:20:06 KoldBane

애니메이션 성장 화살표 링크

답변

관련 문제