使用svg.js加载SVG文件
[英]Loading a SVG file with svg.js
问题描述
I have a HTML5 page with a SVG element in it. 
我有一个带有SVG元素的HTML5页面。 I would like to load a SVG file, extract some elements from it and dispose them one by one with a script. 我想加载一个SVG文件，从中提取一些元素并用脚本逐个处理它们。
I used jQuery to load the SVG file successfully, using .load() , having inserted the SVG tree inside the DOM. 我使用jQuery成功加载SVG文件，使用.load() ，在DOM中插入了SVG树。 But I would like to try svg.js to 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. 但是我想尝试使用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. 想法是访问加载的SVG元素（或直接使用svg.js库加载它），将单个对象复制到另一个元素并将它们移动到我需要的位置。 How to do this? 这该怎么做？
3 个解决方案
解决方案1
15 2017-03-03 21:57:33
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. 您现在应该能够替换任何SVG图像文件并定义任意数量的函数来使用SVG.js库来操作图像。 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 . 要实现的重要一点是， 如果在返回$（document）.ready函数之前调用SVG.js方法将不会成功 。
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'));
解决方案2
11 已采纳 2013-04-10 00:51:25
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.
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');
解决方案3
5 2013-06-25 17:36:55
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 GitHub and the metioned documentation is at http://svgjs.com/referencing/ 该库已移至GitHub ，其中提到的文档位于http://svgjs.com/referencing/
Old link: http://documentup.com/wout/svg.js#referencing-elements
旧链接： http ： //documentup.com/wout/svg.js#referencing-elements
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.