menu
書いてる野郎
orebike@gmail.com
JPEG だけでなく PNG 等の通常は img で表示するであろう画像ファイルを svg の一部として表示する方法。
<svg id="hoge"> <image xlink:href="hoge.jpg" /> </svg> <svg id="piyo"> <image xlink:href="hoge.png" /> </svg>
このようになる
横 300px は表示されているが、縦が 150px で切れてしまっている
SVG 周りでは Firefox が全てにおいてサポートがよい
他に気づく点としては、svg は img と同様にデフォルトではインライン要素として描画されているということである。 普通に2つの要素が横に並んでいる。
まったく表示されない。しかし、svg画像がそこに要素としては存在はしているっぽい。 中身が描画されてないだけ。
CSS で指定する
#hoge{ width: 300px; height: 200px; } #piyo{ width: 300px; height: 200px; }
そもそもまったく表示されない。のでまったく表示されないのはかわりない
つまり透過を確かめてみる
body{ background-color: red; }
背景が単純に赤くなるだけで何もない。本当に枠すら表示されてないことがわかる
#hoge{ width: 400px; height: 200px; } #piyo{ width: 300px; height: 300px; }
jpg 側はより大きな幅にして、png 側はより高い幅にしてみる。
HTML上の svg 画像として確保される領域が広がるだけで内容物に影響が無い
2つの画像の間が広がっているのは hoge が多く領域を確保しているからで、 2個めの画像がより上に表示されているのは、より高さが増えたことで、インラインで下端に画像が揃っているからである。
表示されない