Question

我正在使用svg为我的网络绘制节点，效果很好。但是，我希望某些节点显示动画。我已将动画包含在svg中（与直接svg一样工作正常）。是否可以为节点设置动画svg？我不想添加图像叠加层，因为它需要能够放大和缩小，更改颜色并且也可以一次应用于多个节点。

function createImage(color) {
    var svg = '<svg xmlns="http://www.w3.org/2000/svg" height="512" width="512" viewBox="0 0 512 512">' +
        '<path fill="' + color + '" d="M492 8h-10c-6.627 0-12 5.373-12 12v110.627C426.929 57.261 347.224 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h10.016c6.353 0 11.646-4.949 11.977-11.293C48.157 132.216 141.097 42 256 42c82.862 0 154.737 47.077 190.289 116H332c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h160c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12zm-.301 248h-10.015c-6.352 0-11.647 4.949-11.977 11.293C463.841 380.158 370.546 470 256 470c-82.608 0-154.672-46.952-190.299-116H180c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H20c-6.627 0-12 5.373-12 12v160c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V381.373C85.071 454.739 164.777 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507z">' +
        '<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 261 261" to="360 261 261" dur="5s" repeatCount="indefinite" />' + 
        '</path></svg>';


    return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
}

我使用

创建节点

shape: "image", image: createImage('red'), size: 50

任何帮助将不胜感激。谢谢

vis.js网络-是否可以为节点设置动画SVG？

0 个答案: