11

我有一个带有 SVG 元素的 HTML5 页面。我想加载一个 SVG 文件，从中提取一些元素并用脚本一个一个地处理它们。

我使用 jQuery 成功加载了 SVG 文件，使用.load()，在 DOM 中插入了 SVG 树。但我想尝试svg.js来操作元素，但在文档中我找不到使用现有 SVG 元素初始化库的方法，我将在其中获取对象。

想法是访问加载的 SVG 元素（或直接使用 svg.js 库加载），将单个对象复制到另一个元素并将它们移动到我需要的位置。这该怎么做？

4

3 回答 3

16

给定一个 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 库来操作图像。需要意识到的重要一点是，如果在 $(document).ready 函数返回之前调用 SVG.js 方法，它们将不会成功。

对于奖励积分，我还发现通过在“$tmp”声明后添加以下行来复制“viewBox”、“width”和“height”属性的值，以最有效地成功显示任意 SVG 文件的内容：

    image.attr('viewBox', $tmp.attr('viewBox'));
    image.attr('width', $tmp.attr('width'));
    image.attr('height', $tmp.attr('height'));
于 2017-03-03T21:57:33.573 回答
14

你应该看看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');
于 2013-04-10T00:51:25.157 回答
5

如果您知道元素的 id，则可以在导入原始 svg 后使用 SVG.get 方法：

SVG.get('element_id').move(200,200)

该库已移至GitHub，提及的文档位于http://svgjs.dev/referencing/

旧链接：http://documentup.com/wout/svg.js#referencing-elements
于 2013-06-25T17:36:55.497 回答