同じsvg画像をたくさんの箇所に挿入する場合，このままでは全てのobject要素の中に代替画像のための要素を記述しなければなりません．svg画像と代替画像との関連はできれば一箇所にまとめたい・・・その為にはどうすれば良いでしょうか？
iframeを使ってフォールバック機構を分離する
この問題はフォールバック部分をサブ文書に切り分けることで解決します．そしてメイン文書ではiframe要素を使ってサブ文書の内容をフレーム内部に表示させます．構造を図に表すと次のようになります．
ではコードを見てみましょう．
●main.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
iframe{
width:300px;
height:300px;
border:2px outset black;
}
</style>
</head>
<body>
<iframe src="sub.htm" frameBorder="0"></iframe>
</body>
</html>●sub.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="sub.css" type="text/css"/>
</head>
<body>
<object data="sample.svg" frameBorder="0">
<img src="fallback.png"/>
</object>
</body>
</html>●sub.css
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
line-height:0;
font-size:0;
}
object,img{
width:100%;
height:100%;
border:none 0 black;
display:block;
position:absolute;
top:0;
left:0;
}- メイン文書のiframe要素の大きさを画像の大きさに合わせる必要はありません．
（つまり使い勝手はimg要素やobject要素と同じことになります．） - サブ文書では描画領域全体に画像を表示するようにします．また，なるべく余白等が発生しないようにスタイルを指定しています．
またこのスタイルは別のsvg画像と共通化することを目的に外部ファイルに記述しています． - iframe要素の属性frameBorder="0"はie用の設定で，インラインフレームの枠を非表示にする効果を持っています．
この手法における注意点
このようにフォールバック機構だけを外部に取り出すことが出来ました．が注意すべき点も存在します．このsvg画像にリンクを設定したい場合，iframe要素に対してリンクを張ることとなります．ここでcssのpointer-eventsプロパティをサポートするブラウザであれば，ifame要素のクリックイベントを無効とする事が出来るはずですが，レガシーieについてはこの限りではありません．つまり，この解決策は新たな問題を引き起こす場合があるのです．
スクリプトレスによるフォールバック処理は非常に魅力的ですが，やり過ぎるとかえって問題を複雑化します．逆にスクリプトを用いて良いのなら非常にシンプルな方法が考えられますし，ieにおいては条件付きコメントと言った方法を利用する手もあります．
結局は，どの方法が最も適切かを考えることが大切なのです．
投稿
0 件のコメント:
コメントを投稿