Javascript 使用SVG.js加载SVG文件_Javascript_Jquery_Html_Svg

Javascript 使用SVG.js加载SVG文件

javascript jquery html svg

Javascript 使用SVG.js加载SVG文件,javascript,jquery,html,svg,Javascript,Jquery,Html,Svg,我有一个带有SVG元素的HTML5页面。我想加载一个SVG文件，从中提取一些元素，并用脚本逐个处理它们我使用jQuery成功地加载了SVG文件，使用.load（），在DOM中插入了SVG树。但是我想尝试操作这些元素，但是在文档中，我找不到使用现有SVG元素初始化库的方法，我将从中获取对象想法是访问加载的SVG元素（或直接使用SVG.js库加载），将单个对象复制到另一个元素，并将它们移动到需要的地方。如何做到这一点？您应该看看文件上说将存储具有id的所有导入元素。对象与所有通过导入方法

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

我使用jQuery成功地加载了SVG文件，使用

.load（）

，在DOM中插入了SVG树。但是我想尝试操作这些元素，但是在文档中，我找不到使用现有SVG元素初始化库的方法，我将从中获取对象

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

如何做到这一点？

您应该看看

文件上说

将存储具有id的所有导入元素。对象与所有通过导入方法返回存储的元素：

var rawSvg=”如果您知道元素的id，则可以在导入原始SVG后使用SVG.get方法：
SVG.get('element_id').move(200,200)

该库已移动到，所述文档位于

旧链接：
http://documentup.com/wout/svg.js#referencing-元素给定一个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>

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

然后将显示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'));

如何从var store=draw.svg（rawSvg）
（代码来自@Duopixel）获取id或移动store
？我使用store.get（'Layer_1'）.move（x，y）
但是可以获取attr（'id'）@ricardo您的评论没有帮助，请更具体一些。这是官方网站：它不会呈现像那样的简单svg，我想它最终会得到修复，这是问题，感谢github上的链接！svg.js版本2在coreUpdate中添加了导入功能：同时，这也添加到了核心功能中：这也可能对您有所帮助：这是我希望能够在internet上找到的答案。希望这能为下一个SVG和Javascript noob节省几个小时。这确实会加载和显示SVG，但我在操作它甚至获取SVG内部元素的引用方面运气不佳。我遇到了与@HeadCode相同的问题。它呈现，但我不知道如何操作导入的项目。几个月来我都没有看这个，我试图从头开始复制它，但也遇到了同样的问题！我终于明白了发生了什么，并对示例进行了扩展，以避免将来让更多的人感到沮丧
$(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');
    }
  );

});

    image.attr('viewBox', $tmp.attr('viewBox'));
    image.attr('width', $tmp.attr('width'));
    image.attr('height', $tmp.attr('height'));