SVGアニメーション：中心から線を描く

Question

私はSVGを使ってやりたい基本的なアニメーションを持っています。しかし、私はそれを中心からアニメートする方法について100％確実ではありません。私はSVGアニメーションを初めて使っているので、簡単なアニメーションの作成方法はわかっていますが、私が持っていた質問に対する確かな答えは実際には見つかりませんでした。ここで

/*MAIN ANIMATION*/ 

.line1, 
.line2 { 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
      -o-transform: translate(-50%, -50%); 
       transform: translate(-50%, -50%); 
    -ms-transform: rotate(90deg); /* IE 9 */ 
     -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ 
      transform: rotate(90deg); 
} 

.line1 { 
    top: 0px; 
    animation: line1 5s linear forwards; /*ANIMATION NAME AND TIMING*/ 
} 

.line2 { 
    bottom: 0px; 
    animation: line2 5s linear forwards; /*ANIMATION NAME AND TIMING*/ 
} 

.animationText { 
    width: 100%; 
    font-size: 30px; 
    font-weight: normal; 
    text-align: center; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
      -o-transform: translate(-50%, -50%); 
       transform: translate(-50%, -50%); 
} 

はラインは、現時点ではどのように見えるかについてフィドルです： https://jsfiddle.net/7mastya4/6/

だから要するに、私は外向きの中心からアニメーション化するためにこれらの行を希望しています。 私は標準的なアニメーションを行う方法を知っていますが、SVGには新しく、アニメーションの起点を変更するのはちょっと新しいです。

ありがとうございました。

Answer 1

これは何か？

.animline { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 2; 
 
    -webkit-animation: expand-from-centre 5s linear forwards; 
 
    animation: expand-from-centre 5s linear forwards; 
 
} 
 

 
@-webkit-keyframes expand-from-centre 
 
{ 
 
    from { 
 
    stroke-dasharray: 0 300; 
 
    stroke-dashoffset: -150; 
 
    } 
 
    
 
    to { 
 
    stroke-dasharray: 300 300; 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 

 
@keyframes expand-from-centre 
 
{ 
 
    from { 
 
    stroke-dasharray: 0 300; 
 
    stroke-dashoffset: -150; 
 
    } 
 
    
 
    to { 
 
    stroke-dasharray: 300 300; 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg> 
 
    <line class="animline" x1="0" y1="75" x2="300" y2="75"/> 
 
</svg>