Fabric.js:如何使用预定义的SVG过滤器?

时间:2018-08-13 10:15:37

标签: svg filter fabricjs

我有很多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

结果,我发现了两个问题:

  1. Fabric.js不会解析SVG图像中的过滤器
  2. Fabric.js无法选择将其自己的过滤器应用于已加载的SVG(我不确定这部分)。

我看到两个选择:

  1. 编写大量代码以添加解析器和应用过滤器。
  2. 找到使用Fabric.js本地过滤器的方法。

有什么想法可以在不重写整个库的情况下实现所需的行为吗? :)

0 个答案:

没有答案