Question

如何将Velocity.js与HTML对象标记中包含的SVG图形一起使用（实际上将使用复杂的图形）。

基本上，包括图形：

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

我正在使用带有jQuery v3.1.1最新版本的Velocity.js v1.4.3。我已经广泛搜索了一个解决方案，而Velocity文档只包含内联SVG的例子（蹩脚！）。

Answer 1

所以，对于Pointy的观点（在上面的评论中），这是一个解决方案，它使用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 });

谢谢Pointy！

使用Velocity.js进行SVG动画，将图形作为HTML对象标记包含在内

1 个答案: