Desenhando animação de uma seta no SVG

9

Sou bastante novo no mundo SVG e estou enfrentando alguns problemas quando quero "desenhar" uma seta curva.

Basicamente, eu gostaria de criar uma animação como a explicada no artigo , mas com uma forma no final do caminho para exibir uma seta.

Abaixo está o código que eu uso para a seta reta:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
  <marker
    id="arrow"
    orient="auto"
    viewBox="0 0 10 10"
    markerWidth="3"
    markerHeight="4"
    markerUnits="strokeWidth"
    refX="1" refY="5">
   <polyline points="0,0 10,5 0,10 1,5" fill="black" />
  </marker>
</defs>

<path
    id="line"
    marker-end="url(#arrow)"
    stroke-width="3"
    fill="none"
    stroke="black">

    <animate
        dur="2s"
        repeatCount="indefinite"
        attributeName="d"
        values="M10,10 L10,10; M10,10 L45,25;" />
</path>

Com um pouco de CSS:

#line
{
   stroke-dasharray: 5;
  stroke-dashoffset: 10;
  -webkit-animation: draw 1s linear infinite;
}

@-webkit-keyframes draw
{
  to { stroke-dashoffset: 0;}
}

O resultado está abaixo:

Entãoélegal,masagoraeugostariadeumasetacurva.Porisso,atualizeiataganimada,comoabaixo:

<animatedur="2s"
        repeatCount="indefinite"
        attributeName="d"
        values="M7,121 C7,121 7,121 7,121; M7,121 C66,4 143,75 147,125" />

Acabei de alterar o caminho para animar para ter um curvo. Mas o resultado é o seguinte:

Euachoqueébastantelógico,masnãoéoqueeugostaria.Omarcadorestáatualmentesemovendoemlinhareta;deveseguirocaminhododesenho.

Eunãotenhoideiadecomofazerisso,paraserhonesto,qualquersugestãoseriaótima:)

Vocêpodeencontrar um JSFiddle aqui .

Como você pode ver, nenhum JS é usado nesses experimentos, seria ótimo se pudéssemos evitar essa linguagem e usar SVG + CSS.

Obrigado antecipadamente!

    
por KorHosik 30.10.2014 в 14:42
fonte

1 resposta

2

Eu acho que você pode achar este artigo sobre a animação da linha svg muito útil: link

CSS:

.path {
   stroke-dasharray: 1000;
   stroke-dashoffset: 1000;
   animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
     stroke-dashoffset: 1000;
  }
  to {
     stroke-dashoffset: 0;
  }
}

Demonstração disso em ação: link

Há uma advertência sobre o JavaScript e a determinação do comprimento da linha a ser desenhada. Se você não quiser usar o JS, poderá descobrir qual o tamanho a ser animado, atualizando os valores do traço de traços e do tracejamento.

    
por Paesano2000 10.04.2017 / 16:23
fonte