html5のsvg外部ファイル化のやり方について

締切済

質問者：dadada0220
質問日時：2016/10/30 14:56
回答数：2件

svgタグの中のpathを外部ファイル化して、srcなどで読み込みたいのですがなかなかうまくいきません。どうすればいいでしょうか？
いろいろサイトで調べたのですが、タグが違ったりしたりで思うようにいきませんでした...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>
body{
background-color: #000;
}
#svg_1 {
width: 370px;
height: auto;
text-align: center;
margin: 10% auto 0;
}
.path_name{
stroke:#fff;
fill:none;
stroke-width:1;
stroke-dasharray:3000;
stroke-dashoffset:3000;
animation: DASH 4s ease-in alternate forwards;
-webkit-animation:DASH 4s ease-in 1.5s forwards;
-o-animation:DASH 4s ease-in 1.5s forwards;
animation:DASH 4s ease-in 1.5s forwards;
}

@keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASHf{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;
}

</style>

</head>

<body>

<div id="svg_1">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 301.5 120.6" style="enable-background:new 0 0 301.5 120.6;" xml:space="preserve">
<g>
<path class="path_name" d="M22.3,57.5L36,43.8c0,0-21.8,52.8-24.5,61.3C28.9,61,38.3,47.6,47.3,45.7s8.5,8.7,0,22s-17.5,6.7-17.5,6.7s18.4,9.9,45.8-30.7c-2.8,2.7-5.3,5.8-7.5,9c-2.3,3.2-4.6,6.8-5,10.8c-0.4,3.4,0.9,7.8,4,9.7c6.6,4.1,13-4.7,16-9.6c2.4-3.8,4.3-7.9,5.8-12.2c1-2.7,1.1-6.1-1.7-7.8c-1.6-0.9-3.2-0.4-4.6,0.7C78.1,48,77.5,55.5,78,60.8c1.3,13.7,18.4,9,35.4-17.7c0,0-4.7,6.2,3.1,6.2s-2.8,11.1-5,18.4c-2.2,7.3-0.8,13.7,11.7-1.4s20.9-27.1,26-41.9c-20.4,50.2-15.3,61.7,3.1,40.3s37.1-41.7,36.8-52.3s-9.5-7.8-17,12s-32.4,67.8-29.3,79.5s16.5,0,14.2-15.6c-2.2-15.6-4.9-17.8-4.9-17.8s15.3,8.4,37-25.7c-0.9,1.4-2.7,2.6-3.9,3.8c-1.1,1.2-2.2,2.5-3.2,3.8c-1.7,2.2-3.1,4.6-4.2,7.1c-1.4,3.3-2.4,7.2-1.4,10.7c0.5,1.7,1.6,3.4,3.3,4c3.5,1.2,8.9-1.6,11.8-3.4c5.9-3.6,10.1-9.5,11.6-16.3c3.1-13.7-6.4-15.9-9.8-5s1.1,24.3,17,12.8s35.4-39.1,35.7-48s-4.2-8.4-10.6,1.4S208.3,66.9,218.9,73c10.6,6.1,31-29.6,31-29.6s-21.2,38.8-6.4,29.9c14.8-8.9,26.8-29.6,26.8-29.6s-20.6,14.5-11.7,27.9c5,7.4,12.2,3.2,16.6-2.3c3.4-4.2,6.1-9.1,7.2-14.5c0.7-3.5,1.6-13.3-4.5-11.4c-5.3,1.7-9.9,11.2-6.1,18.4c3.7,7.2,13.4,10.3,20.9-2.8" />
</g>
</svg>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2016/10/31 10:17

ANo1です。

svgファイルの単独テストの際に、白だと見えないので、描画色をグレーに変えたのを忘れたままで投稿してしまいました。
すみませんが、修正を願います。

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2016/10/31 10:06

こんにちは

よくわかっていませんので、適当に検索してテストしてみただけですが・・・

svg全体を外部ファイルにしても良いのであれば、以下の方法で一応可能です。
（正しい書式等は、質問者様の方で再度ご確認ください。）
＜参考サイト＞
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/ …

pathのデータだけを外部ファイルになさりたいのであれば、javascriptを用いてajaxでデータを読込み、path要素を生成することでも実現可能なはずです。

以下、簡単にテストしてみた内容です

◆ HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Document</title>
<style>
body{
background-color: #000;
}
#svg_1 {
width: 370px;
height: auto;
text-align: center;
margin: 10% auto 0;
}
</style>
</head>

<body>
<div id="svg_1">
<object type="image/svg+xml" data="testsvg.svg"></object>
</div>
</body>
</html>

◆ testsvg.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 version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 301.5 120.6" style="enable-background:new 0 0 301.5 120.6;" xml:space="preserve">

<style type="text/css">
.path_name{
stroke:#888;
fill:none;
stroke-width:1;
stroke-dasharray:3000;
stroke-dashoffset:3000;
animation: DASH 4s ease-in alternate forwards;
-webkit-animation:DASH 4s ease-in 1.5s forwards;
-o-animation:DASH 4s ease-in 1.5s forwards;
animation:DASH 4s ease-in 1.5s forwards;
}

@keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASHf{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;
}
</style>

<g>
<path class="path_name" d="M22.3,57.5L36,43.8c0,0-21.8,52.8-24.5,61.3C28.9,61,38.3,47.6,47.3,45.7s8.5,8.7,0,22s-17.5,6.7-17.5,6.7s18.4,9.9,45.8-30.7c-2.8,2.7-5.3,5.8-7.5,9c-2.3,3.2-4.6,6.8-5,10.8c-0.4,3.4,0.9,7.8,4,9.7c6.6,4.1,13-4.7,16-9.6c2.4-3.8,4.3-7.9,5.8-12.2c1-2.7,1.1-6.1-1.7-7.8c-1.6-0.9-3.2-0.4-4.6,0.7C78.1,48,77.5,55.5,78,60.8c1.3,13.7,18.4,9,35.4-17.7c0,0-4.7,6.2,3.1,6.2s-2.8,11.1-5,18.4c-2.2,7.3-0.8,13.7,11.7-1.4s20.9-27.1,26-41.9c-20.4,50.2-15.3,61.7,3.1,40.3s37.1-41.7,36.8-52.3s-9.5-7.8-17,12s-32.4,67.8-29.3,79.5s16.5,0,14.2-15.6c-2.2-15.6-4.9-17.8-4.9-17.8s15.3,8.4,37-25.7c-0.9,1.4-2.7,2.6-3.9,3.8c-1.1,1.2-2.2,2.5-3.2,3.8c-1.7,2.2-3.1,4.6-4.2,7.1c-1.4,3.3-2.4,7.2-1.4,10.7c0.5,1.7,1.6,3.4,3.3,4c3.5,1.2,8.9-1.6,11.8-3.4c5.9-3.6,10.1-9.5,11.6-16.3c3.1-13.7-6.4-15.9-9.8-5s1.1,24.3,17,12.8s35.4-39.1,35.7-48s-4.2-8.4-10.6,1.4S208.3,66.9,218.9,73c10.6,6.1,31-29.6,31-29.6s-21.2,38.8-6.4,29.9c14.8-8.9,26.8-29.6,26.8-29.6s-20.6,14.5-11.7,27.9c5,7.4,12.2,3.2,16.6-2.3c3.4-4.2,6.1-9.1,7.2-14.5c0.7-3.5,1.6-13.3-4.5-11.4c-5.3,1.7-9.9,11.2-6.1,18.4c3.7,7.2,13.4,10.3,20.9-2.8" />
</g>
</svg>