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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

5284閲覧

svgでアニメーションをつくったのだが、htmlに挿入の仕方がわからない

Tan3

総合スコア39

SVG

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/07/06 12:22

編集2022/01/12 10:55

###svgアニメーションをhtmlに挿入したい
イラレで作ったsvgをLazy Line Painterというサイトでアニメーションに変換しました。ここで作ったファイルをhtmlに挿入したいのですが、どこにいれたらいいのかわかりません。

下のサイトを参考にしました。
SVGとjQueryで絵を描いているようなアニメーションを実装する方法

助けてください。

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4<meta charset="UTF-8" /> 5<title>共演者まとめ</title> 6<h1>共演者まとめ</h1> 7 <p>若手俳優がいつだれと共演したのかまとめました。</p> 8 9</head> 10<body> 11<div id="kkss3"> 12</div> 13<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 14<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script> 15<script src="js/kkssillust.js"></script> 16<script src="js/kkssscript.js"></script> 17 18</body> 19</html>

###kkssscript.js

javascript

1//SVG設定用 2 var $svg_elems = $('#kkss3'); 3//$svg_elems.lazylinepainter( 4 //{ 5 //"svgData": pathObj, 6 //"strokeWidth": 2, //線の太さ 7 //"strokeColor": "#fff" //線の色 8 //}).lazylinepainter('paint'); 9 10 //かとべとしょごたんSVG 11 $('#kkss3').lazylinepainter( 12 { 13 "svgData": pathObj, 14 "strokeWidth": 3, //線の太さ 15 "strokeColor": "#666666" //線の色 16 }).lazylinepainter('paint');

###表示されているエラー
Error: <path> attribute d: Expected number, "M 446.6,195. L 474.4,244…".

jquery.js:7975 Error: <path> attribute d: Expected number, "M 437.6,212. L 456.3,244…".

Error: <path> attribute d: Expected number, "M 530.2,147. L 558,195.5…".

jquery.lazylinepainter-1.7.0.min.js:10 Uncaught TypeError: Cannot read property 'x' of undefined

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

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

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

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

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

Chironian

2016/07/06 13:36

すいません。回答依頼を頂きましたが、JavaScriptには詳しくないので回答できません。
Tan3

2016/07/06 13:44

ご丁寧にありがとうございます。お手数をおかけいたしました。
guest

回答2

0

Lazy Line Painterでダウンロードしたコードは質問にある「該当のソースコード」の箇所のみでしたか?

var pathObj = { "": { "strokepath":[ { // 数字・アルファベットなどが大量に書かれている }, // 省略 ], "dimensions":{ // 省略 } }

といった記述があるコードもありませんでしたか?
この箇所が無いと動かないはずです。

(それは別ファイルにして読み込んであるのであれば)
見た所jQueryを読み込んでらっしゃらないので、読み込んだ上で
「該当のソースコード」を下記に記述してみてください。

<!-- まずjQueryを読み込んで --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/kkssillust.js"></script> <script src="js/kkssscript.js"></script> <!-- ここに該当のソースコードを(<script>〜</script>で囲って) --> </body> </html>

投稿2016/07/06 14:03

manabufukai

総合スコア700

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

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

Tan3

2016/07/06 14:25

ご丁寧にありがとうございます。 jquery.lazylinepainter-1.7.0.min.jsをコピーして同じ名前で同じフォルダに保存しました。 svgをアニメーションに変換した var pathObj = { からはじまるコードもあります。ですが、一番最後が "dimensions": { "width": 960, "height": 560 } } }; /* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#undefined').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); になっているようです。大丈夫でしょうか? まだうまく表示されません・・・。
manabufukai

2016/07/06 16:34 編集

うまくいかない理由は質問に追記されたエラーコードに出ています。 エラーコードは基本英語ベースなので、直訳でもある程度意味が分かると思います。 例えば Failed to load resource = リソースの読み込みに失敗 net::ERR_FILE_NOT_FOUND = ファイルが見つかりません (file://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.jsの) つまるところ、ローカルで試してらっしゃるので 「http:」の省略形で提示してしまった「//ajax〜」がローカルにそんなファイルないよ、と言われています。(これは失礼しました) なので、まず 1.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> にhttp:を追記 2. 同じエラーが出ているkkssillust.js、kkssscript.jsの二つのスクリプトファイルもjsフォルダ内へ あと、エラー箇所のファイルまでのフルパスは書かないほうが良いですよ。(セキュリティ上良くありません。PCのユーザーアカウント名もここで公開されていますし…) Users以降のパスは適当な名称に変えておきましょう。
Tan3

2016/07/06 16:47

ご丁寧にありがとうございます。すごくわかりやすいです。 ユーザーアカウント名の件ありがとうございます。急いで変更しました。 jsという名前のフォルダをつくって、kkssillust.js、kkssscript.jsのスクリプトを入れました。 >>1.<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> にhttp:を追記 書きました。 今度は kkssscript.js:3 Uncaught TypeError: $svg_elems.lazylinepainter is not a function kkssillust.js:210 Uncaught TypeError: $(...).lazylinepainter is not a function って言われました・・・。 lazylinepainterが機能していないみたいです・・・。 丁寧に教えてくださってありがとうございます。
manabufukai

2016/07/06 16:58

ちょっと確認です。 ・jquery.lazylinepainter-1.7.0.min.jsは読み込まれていますね? ・kkssscript.jsとkkssillust.jsは何のコードがかかれているファイルですか? ・var pathObj = { からはじまるコード はどこに記述されていますか? あと、 var pathObj = { からはじまるコードの 一番最初の "...": { このダブルクォーテーションの中の文字は何になっていますか? 下記の部分も記述したままファイルにされています? /* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#undefined').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); });
Tan3

2016/07/06 17:19

何度もありがとうございます。 >>・jquery.lazylinepainter-1.7.0.min.jsは読み込まれていますね? すみません。ご質問の意味がわかりません。jquery.lazylinepainter-1.7.0.min.jsという名前のファイルはhtmlと同じフォルダの中にあります。 >>・kkssscript.jsとkkssillust.jsは何のコードがかかれているファイルですか? kksscript.jsはvar pathObjからはじまるコードです。 kkssillust.jsは質問のところに載せてあるファイルです。(名前を追加しました。) >>var pathObj = { からはじまるコードの 一番最初の "...": { このダブルクォーテーションの中の文字は何になっていますか kkss3です。 >> /* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#undefined').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); も記述したままです。・・・消した方がいいですか?一旦消してみます。 なんども丁寧にありがとうございます。
manabufukai

2016/07/06 17:37

なるほど。 ファイルの構成も理解いたしました、ありがとうございます。 基本として、「必要となるファイルは、すべてHtmlでリンクを記述する必要がある」ということを覚えておいてください。 リンクが記述されていなければ、いくら同じフォルダ内にファイルがあっても読み込まれることはありません。 なので、 > jquery.lazylinepainter-1.7.0.min.jsという名前のファイルはhtmlと同じフォルダの中にあります。 これもjsフォルダ内に入れてしまいましょうか。 そのうえで<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script> をjqueryの次に記述してください。(jquery.min.jsの次、kkssillust.jsの前) > >>var pathObj = { からはじまるコードの一番最初の ならば問題ないですね。 > 消した方がいいですか?一旦消してみます。 Setup〜の箇所はサンプルなので、コメントアウトなどしておけば良いかと。 あと var $svg_elems = $('#kkss3'); $svg_elems.lazylinepainter({ //省略 }).lazylinepainter('paint'); //かとべとしょごたんSVG $('#kkss3').lazylinepainter({ //省略 }).lazylinepainter('paint'); この二つが同じ'#kkss3'を参照しているので、まずは一回「かとべとしょごたんSVG」と書いてあるほうを残してコメントアウトしてみましょうか。 それで試してみてください。
Tan3

2016/07/06 23:32

ご丁寧にありがとうございます。 >>基本として、「必要となるファイルは、すべてHtmlでリンクを記述する必要がある」ということを覚えておいてください。 基本から丁寧に解説してくださってありがとうございます。間違えている箇所だけでなく、理由も教えてくださって、勉強になります。 >>Setup〜の箇所はサンプルなので、コメントアウトなどしておけば良いかと。 //を頭につけました >>まずは一回「かとべとしょごたんSVG」と書いてあるほうを残してコメントアウトしてみましょうか。 頭に//をつけました。 エラーが4つ出ました・・・ でも、完成に近づいてきてるのを感じます! ありがとうございます。
manabufukai

2016/07/07 13:24

普通は出ないはずのエラーですね…。 試しに ・同じブラウザ ・同じjQueryのバージョン ・同じLazy Line Painterのバージョン ・同じファイル構成 で昔作ったSVGのアートワークを試してみましたが、普通にエラー無く動きますね。 (これは多分関係無いと思いますが)一応、kkssscript.js をkkssillust.jsの最後にあるサンプルに習って $(document).ready(function(){ ... });で囲ってみてください。 それで動かなければ kkssillust.jsの記述に何か問題があるか、元のSVGファイルに問題があるのでしょう。 Lazy Line Painterのサイトでアップロードした際は普通に動作していますね?
guest

0

参照されているサイトの記事が2014年のものなので、だいぶ古い気がしますが・・・。

自分で用意したJSとともに、アニメーションに必要なスクリプトを読み込めば完了になります

と書かれてあり、”自分で用意したJS”は組み込まれているようですが、”アニメーションに必要なスクリプト”は組み込まれていますか?

現状、どのように表示されますか?
[F12]キー等で、ブラウザの開発ツールを表示してみてください。
lazylinepainterが見つからずエラーになっているとかありませんか?

本家サイトの考える人っぽい絵の下に

A JQUERY PLUGIN FOR SVG PATH ANIMATION

DOWNLOAD FROM GITHUB

と書かれている通り、
GitHubからjquery.lazylinepainter-1.7.0.min.jsをダウンロードして組み込む必要があります。

参照されているサイトの執筆時点ではVersion1.4.1であり、この時は、raphael-min.jsも必要だったようですが、最新では不要なのかもしれません。

投稿2016/07/06 13:46

MasafumiOkamoto

総合スコア254

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

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

Tan3

2016/07/06 14:19

ご丁寧にありがとうございます。 すみません、初心者なもので、 >>[F12]キー等で、ブラウザの開発ツールを表示してみてください。 >>lazylinepainterが見つからずエラーになっているとかありませんか? がよくわかりません。普通のChromeでF12を押してみたのですが、反応しませんでした。コードはmiで書いています。 >>と書かれている通り、 >>GitHubからjquery.lazylinepainter-1.7.0.min.jsをダウンロードして組み込む必要があります。 jquery.lazylinepainter-1.7.0.min.jsはコピーしてmiにはりつけて同じ名前で同じフォルダに保存しました。 まだうまく表示されません。 よろしくお願いいたします。
MasafumiOkamoto

2016/07/06 14:30

失礼。Macをお使いでしたか。 Chromeでしたら、「Command+Option+I」で表示できせんでしょうか? コンテキストメニュー(右クリックメニュー)の「検証」で表示される画面です。
Tan3

2016/07/06 14:36

エラー表示されました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問