■

SVG読み込み

SVG自体をHTML内に記載して作るサイトはよくあるが、外部の.svgから読み込む方法があまり見当たらない。

・これはIEでのプラグインが必要な書き方だと思う。

<embed src="ファイル名.svg" name="SVGEmbed" width="横幅" height="高さ" type="image/svg-
xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/">

・safariとかはこれ

<object type="image/svg+xml" data="ファイル.svg">

・SVGをJavaScriptで動的に読み込む
http://gihyo.jp/dev/feature/01/svg/0004?page=2

・SVGのファイル内の仕様
http://www3.ocn.ne.jp/~dhrname/svgone5.htm

・ファイルサイズ小さくするツール
http://d.hatena.ne.jp/edvakf/20090629/1246296278

SVG画像を動的にJavaScriptから拡大

→hoge.svgを時間で拡大させていく

1.まずSVG内のgタグにID設定

<g id="svg-size" transform="translate(1,1.002)">

→svg-sizeとかつけておく
あとで、サイズを動的に変更する。

2.さらにSVG内のsvgタグにID設定

<svg id="svg-canvas" version='1.1' width='86px' height='20px' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

→svg-canvasとかつけておく
あとで、キャンバスのサイズを動的に変更するため。

3.実際のコード

・HTML 実際にSVGが書かれるDIVを設置

<!-- 実際にSVGが描かれるdivタグ -->
<div id="svg-frame" width="320" height="320">
</div>

・JS

// 拡大率
var svg_scale = 1;
// 横幅（初期サイズ）
var svg_width = 86;
// 縦幅（初期サイズ）
var svg_height = 20;

var SCALE = 1.1;

var xhr = new XMLHttpRequest();
xhr.open('GET', 'hoge.svg', true);
xhr.onload = function(){
  var svgtext = xhr.responseText;
  var svgdom = new DOMParser().parseFromString(svgtext,'application/xhtml+xml');
  var stage = document.getElementById('svg-frame');
  var svg = stage.appendChild(document.adoptNode(svgdom.documentElement));
};
xhr.send();

// 500ミリ秒間隔で呼び出す
setInterval("drawSvg()", 500);

// 実際に描画
var drawSvg = function() {

  // 拡大操作
  svg_scale *= SCALE;
  svg_width *= SCALE;
  svg_height *= SCALE;

  var stage = document.getElementById('svg-size');
  stage.setAttribute('transform', "translate(" + svg_scale + ", " + svg_scale + ")" + "scale(" + svg_scale + ")"); // 拡大セット

  var canvas = document.getElementById('svg-canvas');
  canvas.setAttribute('width', svg_width.toString() + "px"); // 横幅セット
  canvas.setAttribute('height', svg_height.toString() + "px"); // 縦幅セット
}