web-dev-qa-db-ja.com

svg.jsを使用したSVGファイルの読み込み

SVG要素を含むHTML5ページがあります。 SVGファイルをロードし、そこからいくつかの要素を抽出して、スクリプトを使用して1つずつ破棄したいと思います。

DOM内にSVGツリーを挿入した後、.load()を使用して、jQueryを使用してSVGファイルを正常にロードしました。しかし、 svg.js を試して要素を操作したいのですが、ドキュメントでは、オブジェクトを取得する既存のSVG要素を使用してライブラリを初期化する方法を見つけることができません。

ロードされたSVG要素にアクセスして（またはsvg.jsライブラリを使用して直接ロードし）、単一のオブジェクトを別の要素にコピーして、必要な場所に移動するというアイデアがあります。これを行う方法？

javascriptjqueryhtml5svg
9
AkiRoss

svg.import.jsプラグイン を確認する必要があります

ドキュメントには...

IDを持つすべてのインポートされた要素が保存されます。すべての要素が格納されているオブジェクトは、importメソッドによって返されます。

var rawSvg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg [...]>"';
var draw = SVG('paper');
var store = draw.svg(rawSvg);

store.polygon1238.fill('#f06');
11
methodofaction

与えられたSVGファイル 'image.svg'を含む

<svg viewBox="0 0 500 600" version="1.1">
  <rect x="100" y="100" width="400" height="200" fill="yellow" 
   stroke="black" stroke-width="3"/>
</svg>

およびファイル 'index.html'を含む

<html>
  <head>
    <script type="text/javascript" src="svg.js"></script>
    <script type="text/javascript" src="jquery-X.X.X.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="svgimage"></div>
  </body>
</html>

次に、ファイル 'script.js'に

$(document).ready(function() {

  var image = SVG('svgimage');
  $.get('image.svg', function(contents) {
    var $tmp = $('svg', contents);
    image.svg($tmp.html());
  }, 'xml');

  $('#svgimage').hover(
    function() {
      image.select('rect').fill('blue');
    },
    function() {
      image.select('rect').fill('yellow');
    }
  );

});

次に、SVG画像が表示され、マウスポインタをブラウザウィンドウの内外に移動すると、長方形の色が黄色から青に変わります。

これで、SVG画像ファイルを置き換え、SVG.jsライブラリを使用して画像を操作するための関数をいくつでも定義できるようになります。理解しておくべき重要なことは、SVG.jsメソッドの呼び出しは、$（document）.ready関数が返される前に行われた場合は成功しないということです。

ボーナスポイントについては、「$ tmp」の宣言の後に次の行を追加して、「viewBox」、「width」、および「height」属性の値をコピーして、任意のSVGファイルのコンテンツを正常に表示するのに最適であることがわかりました。

    image.attr('viewBox', $tmp.attr('viewBox'));
    image.attr('width', $tmp.attr('width'));
    image.attr('height', $tmp.attr('height'));
15
Dave Douglass