Aki*_*oss 9 javascript jquery html5 svg
我有一个带有SVG元素的HTML5页面.我想加载一个SVG文件,从中提取一些元素并用脚本逐个处理它们.
我使用jQuery成功加载SVG文件,.load()在DOM中插入了SVG树.但是我想尝试使用svg.js来操作元素,但是在文档中我找不到使用现有SVG元素初始化库的方法,在这里我将得到对象.
想法是访问加载的SVG元素(或直接使用svg.js库加载它),将单个对象复制到另一个元素并将它们移动到我需要的位置.这该怎么做？
Dav*_*ass 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'));
met*_*ion 12
你应该看一下svg.import.js插件
文件说......
将存储具有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');
如果您知道元素的id,则可以在导入原始svg后使用SVG.get方法:
SVG.get('element_id').move(200,200)
该库已移至GitHub,其中提到的文档位于http://svgjs.com/referencing/