jQuery 使用 svg.js 加载 SVG 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15911246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading a SVG file with svg.js
提问by AkiRoss
I have a HTML5 page with a SVG element in it. I would like to load a SVG file, extract some elements from it and dispose them one by one with a script.
我有一个 HTML5 页面，其中包含一个 SVG 元素。我想加载一个 SVG 文件，从中提取一些元素并用脚本一一处理它们。
I used jQuery to load the SVG file successfully, using .load(), having inserted the SVG tree inside the DOM. But I would like to try svg.jsto manipulate the elements, but in the documentation I cannot find a way to initialize the library using an existing SVG element, where I will get the objects.
我使用 jQuery 成功加载了 SVG 文件，使用.load()将 SVG 树插入到 DOM 中。但是我想尝试使用svg.js来操作元素，但是在文档中我找不到使用现有 SVG 元素初始化库的方法，我将在其中获取对象。
Idea is to access the loaded SVG element (or load it directly with the svg.js library), copy the single objects to another element and move them where I need. How to do this?
想法是访问加载的 SVG 元素（或直接使用 svg.js 库加载它），将单个对象复制到另一个元素并将它们移动到我需要的地方。这该怎么做？
回答by Dave Douglass
Given an SVG file 'image.svg' containing
给定一个 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>
and a file 'index.html' containing
和一个包含“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>
then if file 'script.js' contains
那么如果文件'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');
}
);
});
then the SVG image will display and moving the mouse pointer in and out of the browser window will change the color of the rectangle from yellow to blue.
然后将显示 SVG 图像，将鼠标指针移入和移出浏览器窗口将使矩形的颜色从黄色变为蓝色。
You should now be able to substitute any SVG image file and define any number of functions to manipulate the image using the SVG.js library. The important thing to realize is that calls to SVG.js methods will not succeed if they take place before the $(document).ready function has returned.
您现在应该能够替换任何 SVG 图像文件并定义任意数量的函数来使用 SVG.js 库操作图像。需要意识到的重要一点是，如果调用 SVG.js 方法在 $(document).ready 函数返回之前发生，它们将不会成功。
For bonus points, I also found copying the values of the 'viewBox', 'width' and 'height' attributes by adding the following lines after the declaration of '$tmp' to work best for successfully displaying the contents of arbitrary SVG files:
对于奖励积分，我还发现通过在 '$tmp' 声明后添加以下行来复制 'viewBox'、'width' 和 'height' 属性的值，以最有效地显示任意 SVG 文件的内容：
image.attr('viewBox', $tmp.attr('viewBox'));
image.attr('width', $tmp.attr('width'));
image.attr('height', $tmp.attr('height'));
回答by methodofaction
You should take a look at the svg.import.js plugin
你应该看看svg.import.js 插件
The documentation says...
文档说...
All imported elements with an id will be stored. The object with all stored elements is returned by the import method:
所有带有 id 的导入元素都将被存储。包含所有存储元素的对象由导入方法返回：
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');
回答by wout
If you know the id's of elements you can use the SVG.get method after importing raw svg:
如果您知道元素的 id，则可以在导入原始 svg 后使用 SVG.get 方法：
SVG.get('element_id').move(200,200)
The library was moved to GitHuband the metioned documentation is at http://svgjs.com/referencing/
该库已移至GitHub，所提及的文档位于http://svgjs.com/referencing/
旧链接： http://documentup.com/wout/svg.js#referencing-elementshttp://documentup.com/wout/svg.js#referencing-elements
