私は、ポリラインツールを使用して特定のシェイプを定義するために、SVGのHTMLで作業しています。私はボタンのタッチと数秒以上の間に、特定の形状の外観を別の形にアニメートすることを目指しています。SVGアニメーションを使用したポリラインの外観のアニメーション
私はポリラインポイント属性を変更するためにアニメーションツールを使用していましたが、今まで完全に機能する解決策や何かを見つけることができませんでした。
これは可能ですか？そうでない場合は、実行可能な選択肢がありますか？
SVGはそれぞれの（コントロール）ポイントを単独で動かすだけなので、同じ数のポイントを持つ限り、トゥイーンにポリライン（およびベジェ曲線などのパス）を供給できます。シェイプのコントロールポイント数が同じでない場合は、一部を一致させることもできますが、グラフィカルエディタはこれを「修正」します。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline stroke="red" stroke-width="3" fill="none">
<animate attributeName="points" dur="5s" repeatCount="indefinite"
from="100,100 900,100 900,900 100,900 100,100"
to="200,200 800,500 800,500 200,800 200,200"
/>
</polyline>
</svg>
どのように私はそのSVGのホバー上でこれを行うことができますか？ SVGを自分のホバーでアニメーション化する方法を教えてください。 –
このライブラリをチェックアウトする：http://raphaeljs.com/ SVGファイルを非常にうまく読み込むことはできませんが（ほとんどの機能を持つプラグインがあります）、アニメーションは素晴らしいです。 – Blender
「完全に」動作するソリューションを見つけることはできないと言います。何がうまくいったのか、あなたが見つけた問題を説明できますか？それは、他の人があなたのニーズが何であるかを見るのを助けるかもしれません。 – Phrogz