Question

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

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

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

Answer 1

给出一个SVG文件＆＃39; image.svg＆＃39;含

doLast

和文件＆＃39; index.html＆＃39;含

task someTask(type: Sync) {
    doLast {
        def folder = new File('fold1/fold2/');
        if (!folder.exists()) {
            throw new GradleException('Folder Absent');
        }
        else {

        }
    }
}

然后如果文件＆＃39; script.js＆＃39;包含

<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>

然后SVG图像将显示并移动鼠标指针浏览器窗口的颜色将从黄色更改矩形的颜色蓝色。

您现在应该能够替换任何SVG图像文件并定义任意数量的函数来使用SVG.js库来操作图像。要认识到的重要一点是，如果在$（document）.ready函数返回之前发生调用SVG.js方法将无法成功。

对于奖励积分，我还发现复制了＆＃39; viewBox＆＃39;，＆＃39; width＆＃39;和＆＃39;身高＆＃39;在声明＆＃39; $ tmp＆＃39;之后添加以下行的属性最适合成功显示任意SVG文件的内容：

<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>

Answer 2

您应该查看svg.import.js plugin

文件说......

将存储具有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');

Answer 3

如果你知道元素的id，你可以在导入raw 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文件

3 个答案: