質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

SVGアニメーションのパス

削除済ユーザー
削除済ユーザー

総合スコア0

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

893閲覧

投稿2019/09/22 02:00

編集2022/01/12 10:55

SVGでアニメーションを実装したいのですが...

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="129.24107pc" height="31.74107pc" viewBox="0 0 547.12052 134.37052" version="1.1" id="svg8" inkscape:version="0.92.4 (5da689c313, 2019-01-14)" style="" class=""> <defs id="defs2"></defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="1439.6428" inkscape:cy="158.32741" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" showguides="false" inkscape:window-width="2560" inkscape:window-height="1057" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" units="pc"></sodipodi:namedview> <metadata id="metadata5"> <rdf:rdf> <cc:work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type> <dc:title></dc:title> </cc:work> </rdf:rdf> </metadata> <g inkscape:label="レイヤー 1" inkscape:groupmode="layer" id="layer1" transform="translate(401.3162,-247.20164)"> <path style="fill: none; fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-width: 1.32292px; stroke-miterlimit: 4; stroke-opacity: 1;" d="M -127.75592,380.91071 H 8.6934762 68.791678 145.14288 V 347.6488 314.3869 281.12499 247.8631 H 8.6934762" id="rect815" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccccccc" class="iCSbfHOz_0"></path> <path style="fill: none; fill-opacity: 1; stroke: rgb(0, 0, 0); stroke-width: 1.32292px; stroke-miterlimit: 4; stroke-opacity: 1;" d="m -264.20534,247.8631 h -136.4494 v 33.26189 33.26191 33.2619 33.26191 h 136.4494 136.44942" id="rect815-0" inkscape:connector-curvature="0" sodipodi:nodetypes="cccccccc" class="iCSbfHOz_1"></path> </g> <style data-made-with="vivus-instant">.iCSbfHOz_0{stroke-dasharray:543 545;stroke-dashoffset:544;animation:iCSbfHOz_draw 500ms ease-out 0ms forwards;}.iCSbfHOz_1{stroke-dasharray:543 545;stroke-dashoffset:544;animation:iCSbfHOz_draw 500ms ease-out 0ms forwards;}@keyframes iCSbfHOz_draw{100%{stroke-dashoffset:0;}}@keyframes iCSbfHOz_fade{0%{stroke-opacity:1;}91.48936170212767%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>

Vivus Instantで作ったSVGなんですけど、現状2つの線が左から右に動いていくアニメーションなのですが
このアニメーションを左側のアニメーションはそのままで、右側のアニメーションを今とは逆の流れに変えたいのですがどの部分をどのように直せばよいのでしょうか?

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。