jquery 使用svg.js加载SVG文件

kqqjbcuj 于 2023-11-17 发布在 jQuery

关注(0)|答案(3)|浏览(238)

我有一个HTML 5页面，其中包含SVG元素。我想加载一个SVG文件，从中提取一些元素，并使用脚本逐个处理它们。
我使用jQuery成功地加载了SVG文件，使用.load()，在DOM中插入了SVG树。但是我想尝试svg.js来操作元素，但是在文档中我找不到一种方法来使用现有的SVG元素初始化库，我将在其中获取对象。
我们的想法是访问加载的SVG元素（或者直接用svg.js库加载它），将单个对象复制到另一个元素中，然后将它们移动到需要的位置。如何做到这一点？

jquery

来源：https://stackoverflow.com/questions/15911246/loading-a-svg-file-with-svg-js

3条答案

按热度按时间

tf7tbtn21#

给定一个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'));

型

赞(0）回复(0）举报 2023-11-17

hk8txs482#

你应该看看svg.import.js plugin
文件上说...
所有带id的导入元素都将被存储。包含所有已存储元素的对象由import方法返回：

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');

字符串

赞(0）回复(0）举报 2023-11-17

cunj1qz13#

如果你知道元素的id，你可以在导入原始svg后使用SVG.get方法：

SVG.get('element_id').move(200,200)

字符串
该库已移至GitHub，所提到的文档位于http://svgjs.dev/referencing/
旧链接：http://documentup.com/wout/svg.js#referencing-elements

赞(0）回复(0）举报 2023-11-17

我来回答

jquery 使用svg.js加载SVG文件

3条答案

相关问题

热门标签

最新问答