svgファイルの外部定義

svgで定義した図形をHTMLにインラインではなく、外部定義して呼び出したいです。

下記の記述で図形が表示されない原因は何故でしょうか。
詰まってしまったのでご教示お願いいたします。

demo.html

html
1<html5>
2<body>
3
4  <object type="image/svg+xml" data="demo.svg" width="500px" height="500px"></object>
5
6</body>
7</html5>
8

demo.svg

svg
1<svg width="500px" height="300px">
2  <rect x="10" y="90" fill="#FFFFFF" stroke="#000000" width="300" height="180"/>
3  <polyline fill="#FFFFFF" stroke="#000000" points="10,90 150,10 310,90 "/>
4</svg>

ちなみにsvgの図形はjavascriptで処理を加える予定です。
imageタグだとjavascriptでは操作ができないようなので、objectタグで呼び出そうとしているところです。
※imageタグを使っても表示されなかったので根本的に構文が間違っているのでしょうか。

ディレクトリ構成
sample/demo.html
sample/demo.svg

行動規範の内容に同意します

回答1件

ベストアンサー

<svg>タグで、XML名前空間の指定とviewBox属性が抜けています。

(修正前)

<svg width="500px" height="300px">
  ...
</svg>

↓

(修正後)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 300">
  ...
</svg>

(参考: https://qiita.com/mochieer/items/5d26e49c85750756997a)

投稿2019/02/19 14:07

othersight

総合スコア356

退会済みユーザー

2019/02/20 07:29

上記で試したところ、「Uncaught (in promise) TypeError: Cannot read property 'split' of undefined」というエラーが出ました。

退会済みユーザー

2019/02/20 07:50

いろいろ試しているうちに図形を表示することが出来ました。 svgファイルに複数の図形を定義している状態だと表示されないことが分かりました。 objectタグで図形を呼び出す場合、属性値などで呼び出す図形を指定することが出来ないかが次の課題となりました。

othersight

2019/02/20 08:05

上記のエラーは明らかにJavaScriptによるものなのでSVGとHTML自体に問題があるわけではないだろうと思いましたが、ひとまず表示の確認まではできたようで、何よりです。なお、SVG自体が正しいかどうかはSVGファイル単体をブラウザ(Chromeなど)で開けば確認できますので、問題の切り分けに使えるのではと思います。細かい話ですが、demo.htmlで、<html5>...</html5>ではなくて<html>...</html>ですよね。

行動規範の内容に同意します