我有很多SVG图像,其中定义了滤镜动画。 为了描述这个问题,我做了jsFiddle:http://jsfiddle.net/kinos/3vhtmsy5/47/ 您会看到内联SVG,该指示灯闪烁红色警报过滤器,并且带有已加载SVG的fabric.js画布没有闪烁。
HTML(嵌入式SVG在此处添加的位置过多):
<div id="svg"></div>
<canvas id="nativeCanvas"></canvas>
Javascript:
var canvas = new fabric.Canvas('nativeCanvas', {width: 1000, height: 600});
fabric.loadSVGFromString(document.getElementById('svg').innerHTML, function (objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
obj.set({left: 200, top: 250});
canvas.add(obj);
}, addSVGProperties);
function addSVGProperties(el, obj) {
obj.id = el.getAttribute('id');
}
我想从SVG加载预定义的过滤器并进行管理-将其应用于/取消应用于元素。
我做了一个小型研究,该研究在google小组中描述:https://groups.google.com/forum/#!topic/fabricjs/q1ASN-fsbpk
结果,我发现了两个问题:
我看到两个选择:
有什么想法可以在不重写整个库的情况下实现所需的行为吗? :)