1. 首页
  2. 问答
  3. 使用Velocity.js进行SVG动画并将图形作为HTML对象标记

使用Velocity.js进行SVG动画并将图形作为HTML对象标记

2017-03-06 33 views
0

如何将Velocity.js与包含在HTML对象标记中的SVG图形一起使用（这实际上是多么复杂的图形将被使用）。使用Velocity.js进行SVG动画并将图形作为HTML对象标记

基本上，包括图形：

<body> 
    <div id="graph"> 
    <object id="objSvg" type="image/svg+xml 
     data="./diagram-arch-server-SRS-CH.svg"></object>

接着，下面的方法不起作用：

$("#server-webserver-4266").velocity({ x: "+=200", y: "25%" }); 
$("#objSvg").find("#server-webserver-4266").velocity({ fillGreen: 255, strokeWidth: 2 });

我使用Velocity.js 1.4.3用jQuery V3.1.1最新版本。 我已经广泛搜索了一个解决方案，Velocity文档只包含内联SVG（跛脚！）的示例。

来源

2017-03-06 Jeff Sheffel

+1

当您通过''标签导入SVG，SVG的存在于它自己的DOM为元素的内容文件。 jQuery不能/不会遍历它。 – Pointy

回答

0

所以，尖尖的点（在上面的注释），这里是一个解决方案使用Javascript功能来访问正确的SVG元素，然后jQuery的应用Velocity.js方法：

// refer to the HTML in the original post, then the following script works! 
myObj = document.getElementById("objSvg"); 
myContent = myObj.contentDocument; 
myServer = myContent.getElementById("server-webserver-4266"); 
$(myServer).velocity({ x: "150", y: "-=75" }); 
$(myServer).velocity({ fillGreen: 255, strokeWidth: 2 });

谢谢你尖尖！

来源

2017-03-06 22:04:20

相关问题

 相关问题