使用svg.js加载SVG文件

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

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

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

Answer 1

你应该看一下svg.import.js插件

文件说……

将存储具有id的所有导入元素。 导入方法返回包含所有存储元素的对象：

 var rawSvg = ' 

Answer 2

给定一个SVG文件’image.svg’

和一个包含的文件’index.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.js库替换任何SVG图像文件并定义任意数量的函数来操作图像。 要实现的重要一点是， 如果在返回$（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')); 

Answer 3

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

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

该库已移至GitHub ，其中提到的文档位于http://svgjs.com/referencing/

---

旧链接： http ： //documentup.com/wout/svg.js#referencing-elements