使用svg.js加載SVG文件
[英]Loading a SVG file with svg.js
問題描述
我有一個帶有SVG元素的HTML5頁面。 我想加載一個SVG文件，從中提取一些元素並用腳本逐個處理它們。
我使用jQuery成功加載SVG文件，使用.load() ，在DOM中插入了SVG樹。 但是我想嘗試使用svg.js來操作元素，但是在文檔中我找不到使用現有SVG元素初始化庫的方法，在這里我將得到對象。
想法是訪問加載的SVG元素（或直接使用svg.js庫加載它），將單個對象復制到另一個元素並將它們移動到我需要的位置。 這該怎么做？
3 個解決方案
解決方案1
15 2017-03-03 21:57:33
給定一個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'));
解決方案2
11 已采納 2013-04-10 00:51:25
你應該看一下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');
解決方案3
5 2013-06-25 17:36:55
如果您知道元素的id，則可以在導入原始svg后使用SVG.get方法：
SVG.get('element_id').move(200,200)
該庫已移至GitHub ，其中提到的文檔位於http://svgjs.com/referencing/
舊鏈接： http ： //documentup.com/wout/svg.js#referencing-elements
使用svg.js加載SVG文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.