web-dev-qa-db-ja.com

svgアニメーションonclickイベントを開始します

この次のコードは、SVGポリゴンのアニメーションに最初の開始時間が指定されている場合に正常に機能します。しかし、「vbanim」アニメーションの開始時間を指定せずに、javascript/jqueryを介してトリガーする方法を理解することはできません。

$('button').click(function() {
  $('#v-b').beginElement();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to draw</button>
<svg width="100px" height="100px" preserveAspectRatio="false" viewBox="0 0 500 800">
  <polygon points="20,20 490,20 490,780 20,780" stroke="black" fill="transparent" stroke-width="2" id="v-b" stroke-dasharray="3000"/>
  <animate xlink:href="#v-b" attributeName="stroke-dashoffset" from="3000" to="0" dur="2s" begin="indefinite" fill="freeze" id="vbanim"/>
  <animate xlink:href="#v-b" attributeName="fill" from="transparent" to="rgba(130,130,130,0.6)" dur="1s" begin="vbanim.end" fill="freeze"/>
</svg>

ボタンがクリックされた後にのみストロークダッシュオフセットと塗りつぶしアニメーションを実行する必要があります。その前に、SVGはまったく表示されないはずです。助けてくれてありがとう。

javascriptjqueryhtmlcsssvg
6
Sidzler

BeginElement（）を使用して、イベントの生成時にアニメーションを無期限に開始するための推奨される実用的なソリューション。

注-beginElement（）関数は、Jqueryではなくネイティブjavascript /でのみ機能します。

$('button').click(function() {
  document.getElementById('vbanim').beginElement();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to draw</button>
<svg width="100px" height="100px" preserveAspectRatio="false" viewBox="0 0 500 800">
  <polygon points="20,20 490,20 490,780 20,780" stroke="black" fill="transparent" stroke-width="0" id="v-b" stroke-dasharray="3000" />
  <animate class="anim1" xlink:href="#v-b" attributeName="stroke-dashoffset" from="3000" to="0" dur="2s" begin="indefinite" fill="freeze" id="vbanim"/>
  <animate class="anim2" xlink:href="#v-b" attributeName="fill" begin="vbanim.end" from="transparent" to="rgba(130,130,130,0.6)" dur="1s"  fill="freeze"/>
  <animate class="anim3" xlink:href="#v-b" attributeName="stroke-width" from="0" to="10" dur="0.2s" begin="vbanim.begin" fill="freeze" id=""/>
</svg>
4
Sidzler

こんにちは私はあなたが何を達成したいのかわかりません..

サンプルコードのリンクを参照してください。

https://codepen.io/deibu21/pen/jYQLEO

私が行ったことは、animateタグでクラスを作成したことです。次に、jqueryのattr（）を使用して、「begin」の属性をターゲットにします。以下のコードを参照してください。

$('button').click(function() {
  $('svg animate.anim1').attr("begin", 2);
  $('svg animate.anim2').attr("begin", 3);
})

お役に立てれば。

3
davecar21