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

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

ただいまの
回答率

90.86%

  • HTML5

    3586questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1844questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • SVG

    81questions

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

  • Illustrator

    52questions

    Illustratorは、アドビシステムズ(株)が開発した描画ツールソフトです。 イラスト製作やロゴタイプ、広告作成時などのデザインツールとして、さまざまな分野のクリエーターに愛用されています。 プラグインの中にCADや3DCG機能の拡張ができるものがあります。 特に広告作成などの印刷業界では、トップクラスのシェアを誇っているソフトです。

SVGを使用したアニメーション

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 63

nyako_prog

score 2

 実現したいこと

Illustratorで書き出したSVGを使ってアニメーションを作成したいです。
最終的には文字を手書き風に書き出したいです。

 発生している問題

↓Illustratorで作ったSVG
イメージ説明
左上から右下にかけてパスを通しています。このパス通りにアニメーションして欲しいです。
Illustratorの線幅ツールを使って線を太くしています。

↓HTMLにPATHを貼ってCSSを設定、実行
左上から上を通って右下、右下から下を通って左上へとアウトラインをなぞるようにアニメーションしてしまいます。
左上から右下へとアニメーションして欲しい...!!

イメージ説明

 コード

<svg viewBox="0 0 305.65 259.76"><line x1="0.32" y1="0.38" x2="305.32" y2="259.38"/>
<path class="path" d="M144.82,253.12a191.9,191.9,0,0,1,28.55,5c9,2.23,17.76,4.84,26.21,7.77s16.65,6.14,24.62,9.64c2,.84,4,1.78,5.94,2.67S234.08,280,236,281q5.82,2.81,11.5,5.77A423,423,0,0,1,330.2,343.9a479.72,479.72,0,0,1,68.71,73.64c2.54,3.44,5.08,6.88,7.53,10.44s4.89,7.13,7.29,10.74q7.11,10.93,13.65,22.55c4.34,7.77,8.46,15.81,12.27,24.19a209,209,0,0,1,10.17,26.66l-.64.76a207.53,207.53,0,0,1-28-5.72c-8.89-2.4-17.48-5.16-25.85-8.18s-16.51-6.32-24.47-9.82c-3.95-1.79-7.91-3.57-11.78-5.46s-7.72-3.78-11.53-5.74A479.09,479.09,0,0,1,263.8,422.1,423.7,423.7,0,0,1,194,349.78c-2.58-3.41-5.09-6.9-7.56-10.42q-1.86-2.64-3.65-5.36c-1.2-1.81-2.44-3.57-3.59-5.43q-7.12-10.94-13.51-22.73t-11.91-24.6a189.8,189.8,0,0,1-9.58-27.36Z" transform="translate(-144.18 -253.12)"/>
</svg>
.path{
    stroke:black;
    fill:transparent;
    stroke-width:5;
    stroke-dasharray: 5000;
    stroke-dashoffset:5000;
    animation: DASH 3.4s ease-in-out alternate forwards;
    -webkit-animation:DASH 3.4s ease-in-out 0s forwards;
    animation:DASH 3.4s ease-in-out 0s forwards;
}

@keyframes DASH{
    0%{
    stroke-dashoffset:5000;
    fill:transparent;
    }
    100%{stroke-dashoffset:0;
    fill:black;
    }
}
@-moz-keyframes DASH{
    0%{stroke-dashoffset:5000;}
    100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
    0%{stroke-dashoffset:5000;}
    100%{stroke-dashoffset:0;}
}


CSSはこちらを参考にしました。

 補足情報

お力添えください...!!

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

今回のような場合には、徐々に塗っていくということは実現が難しいです。
(この画像の上に画像を重ね、それを消していくというようにすれば、擬似的に塗っているよう見せることができそうです。)

最終的には文字を手書き風に書き出したいとのことであれば、今回の件はスルーされたほうがよいように思います。

SVGでアニメーションを実現する際には、太さ・色が同じパスを線画していくようなイメージの方が簡単です。
(参考にされているサイトで、最初に筆記体の文字をトレースしているのは、筆記体フォントはそれぞれの部分で太さが違うためです。最終的に実現している筆記体はパスの太さが同じですよね?)

太さが違うものを実現したい場合には、下記サイトのように、フォントのアウトラインを徐々に書いていって、最後に塗る、という方法で実現が可能です。
http://ascii.jp/elem/000/000/901/901319/

うまく伝わったかわかりませんが、質問があれば気軽にどうぞ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 19:11

    回答ありがとうございます。
    アウトラインを表示→塗るの方法に変更しました!

    画像の上にマスクを作成する方法も試したのですが、画像サイズ、あるいはSVGのviewboxの設定がうまくいかずズレが生じてしまいました。

    キャンセル

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

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • HTML5

    3586questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1844questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • SVG

    81questions

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

  • Illustrator

    52questions

    Illustratorは、アドビシステムズ(株)が開発した描画ツールソフトです。 イラスト製作やロゴタイプ、広告作成時などのデザインツールとして、さまざまな分野のクリエーターに愛用されています。 プラグインの中にCADや3DCG機能の拡張ができるものがあります。 特に広告作成などの印刷業界では、トップクラスのシェアを誇っているソフトです。