2012年6月21日木曜日

sie1.0におけるインラインsvgの表示について

sieはsvgに対応していないieにおいて擬似的にベクタグラフィックを描くためのjavascriptライブラリだ．svgをvmlに変換するという離れ業をやってのけていて，インラインsvgにも対応しているとのこと．それで少し動作検証を行ったところ次のような不具合に遭遇した．
  • svginhtml.jsを利用してインラインsvgを表示させたところ，2つ目以降のsvg要素が正しく表示されない．
そこでソースコードを調査したところ，どうやら次の2箇所を修正することで正常に動作する模様だ．
動作検証はwindows xp prof＋ie8．
※但し，それ以上の検証は行なっていないので適用は自己責任でお願いします．
  • line4061「ifcw = ifr?ifr.contentWindow:undefined,//by defghi1977」
    インラインsvgの処理時にiframeは存在しないので，ifcwにundefinedを指定する．
  • line4305「//delete NAIBU.doc; by defghi1977」
    途中でNAIBU.docが削除されてしまうため，2つ目のsvg描画時にエラーが発生する．この処理をコメントアウト．（もしくは適切な場所でdeleteし直すようにする．）



<!DOCTYPE html>
<html>
 <head>
  <title>sie-inline svg sample</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 </head>
 <body>
<!--[if lte IE 8]>
<script defer="defer" type="text/javascript" src="sie.js"></script>
<script type="text/javascript" src="svginhtml.js"></script>
<!--<![endif]-->
<div style="display:inline;">
 <svg viewBox="0 0 200 200" width="200" height="200" id="svg01">
  <g id="part">
   <path d="M 100,100 Q 50,50 80,10 L 100,20 L 120,10 Q 150,50 100,100 z" fill="pink"/>
   <path d="M 100,95 v -40" stroke="white" stroke-width="5" stroke-linecap="round"/>
  </g>
  <use xlink:href="#part" transform="rotate(72,100,100)"/>
  <use xlink:href="#part" transform="rotate(144,100,100)"/>
  <use xlink:href="#part" transform="rotate(-144,100,100)"/>
  <use xlink:href="#part" transform="rotate(-72,100,100)"/>
 </svg>
</div>
<div>
<svg viewBox="0 0 200 200" width="200" height="200" id="svg02">
 <circle cx="100" cy="100" r="100" fill="red"/>
</svg>
</div>
 </body>
</html>
時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)