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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1666閲覧

SVGとVivus.jsで線が描画された後に塗りつぶしをしたい

kum_shun

総合スコア4

SVG

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/08/05 02:16

やりたいこと

SVGで雲の絵を描画し、Vivus.jsを用いて線の描画が終わった後にその中を塗りつぶしたい

現状

SVGで雲の絵を描写し、線のアニメーションはうまく反映されていますが、そのあとの塗りつぶしがうまく機能していません。
恐らく、JavaScriptのコールバック関数が何らかの原因で機能していないのかと思われます。

CodePenで確認

HTML

1 <body> 2 <svg 3 id="main-visual" 4 width="1452" 5 height="850" 6 viewBox="0 0 1452 850" 7 fill="none" 8 xmlns="http://www.w3.org/2000/svg" 9 > 10 <path 11 class="Big-cloud" 12 fill-rule="evenodd" 13 clip-rule="evenodd" 14 d="M850.046 78.2185C861.454 75.9751 868.067 73.3095 868.067 70.45C868.067 62.4695 816.564 56 753.033 56C689.502 56 638 62.4695 638 70.45C638 77.7986 681.669 83.866 738.188 84.7808C726.779 87.0242 720.167 89.6897 720.167 92.5493C720.167 100.53 771.669 106.999 835.2 106.999C898.731 106.999 950.233 100.53 950.233 92.5493C950.233 85.2007 906.564 79.1333 850.046 78.2185Z" 15 fill="none" 16 /> 17 </svg> 18 <script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script> 19 <script src="script.js"></script> 20 </body> 21</html> 22

JS

1new Vivus( 2 'main-visual', 3 { 4 duration: 200, 5 start: 'autostart', 6 type: 'scenario', 7 pathTimingFunction: Vivus.EASE_OUT, 8 }, 9 function(obj){ 10 obj.el.classList.add('fill'); 11 } 12); 13

CSS

1body { 2 text-align: center; 3 width: 100%; 4 background-color: #3c63c1; 5} 6 7path{ 8 stroke: black; 9 fill-opacity: 0; 10 transition: fill-opacity 1s; 11} 12 13.fill{ 14 fill: white; 15 fill-opacity: 1; 16}

### 参考にしたサイト

https://www.webprofessional.jp/how-to-create-the-invisible-pen-effect-in-svg-using-vivus-js/
https://liginc.co.jp/394561

上記のサイトを参考にいろいろと試してみましたが、自分の力では解決できなかったため、お力添えいただきたいです。
何卒よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dameo

2020/08/05 12:53

obj.elがID指定したSVG要素になるようなので、そこをfillクラスを付けても、path自体はfill属性がnoneに指定されてて変わりません。 例えばそこからセレクタでpath要素を指定してあげればいいかも。 obj.el.querySelector('path').classList.add('fill');
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問