サブウィンドウにSVGを書き出す


動作ブラウザ 【 IE:4.0  NN:3.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × - × -
Macintosh × × × × - × × - - ×
UNIX - - - - - × × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント subWin = window.open("","svg","width=320,height=240"); text = document.myFORM.myTEXT.value; with(subWin.document) { open("image/svg"); write('<?xml version="1.0"?>'); write('<svg>'); write('<text id="txt" x="10" y="20">'+text+'</text>'); write('</svg>'); close(); }
説  明 サブウィンドウにSVGを出力するにはdocument.open()の引数にSVGのMIMEタイプを指定します。SVGのMIMEタイプはimage/svgなのでdocument.open("image/svg")と指定します。この後、document.write()でSVGデータをサブウィンドウに出力します。出力が終わったらdocument.close()で出力を終了させます。
サンプル <html> <head> <title>サブウィンドウにSVGを書き出す</title> <script language="JavaScript"><!-- function writeData() { subWin = window.open("","svg","width=320,height=240"); text = document.myFORM.myTEXT.value; with(subWin.document) { open("image/svg"); write('<?xml version="1.0"?>'); write('<svg>'); write('<text id="txt" x="10" y="20">'+text+'</text>'); write('</svg>'); close(); } } // --></script> </head> <body> <form name="myFORM"> <textarea name="myTEXT" cols="30" rows="4">Sample Text...</textarea> <input type="button" value="出力" onClick="writeData()"><br> </form> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA