javascript - 作为字符串加载的 SVG (fabric.js) 没有渐变

Question

我正在使用 fabric.js 将 SVGgraphic 加载到 Canvas 中。因为通过 loadSVGFromURL 加载它在 IE9 中不起作用，所以我决定使用 loadSVGFromString。

现在 SVG 已加载并在 IE9 中显示，但渐变消失了。我不太熟悉 SVG 标记，但在我看来，radialGradient 标记正确。

是标记不正确还是 fabric.js 错误地解析了标记？

我举了一个简单的例子: http://jsfiddle.net/t8bx5/

var canvas;

$(function() {
var svg, jsonCanvas;

svg = new String('<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"     viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve"><radialGradient id="SVGID_1_" cx="1040.036" cy="1075.761" r="317.5209" gradientTransform="matrix(0.8307 0 0 -0.8307 -639.1652 1063.4171)" gradientUnits="userSpaceOnUse">    <stop  offset="0.2393" style="stop-color:#DBF230"/>    <stop  offset="0.3935" style="stop-color:#D5EF2D"/>    <stop  offset="0.5999" style="stop-color:#C4E722"/>    <stop  offset="0.8346" style="stop-color:#A9DA10"/>    <stop  offset="1" style="stop-color:#91CF00"/></radialGradient><path fill="url(#SVGID_1_)" d="M8.7,143.5c0,2.2,9.8,4.3,12,4.3c3.3,0,6.5,1.1,9.8,1.1c1.1,0,7.6,0,8.7,0c-4.3,2.2-6.5,3.3-7.6,4.3    c-5.4,4.3-12,9.8-15.2,15.2c-2.2,3.3-2.2,7.6,2.2,9.8c4.3,1.1,10.9,0,16.3-2.2c4.3-1.1,8.7-2.2,12-4.3c7.6-3.3,15.2-7.6,22.8-12    c7.6-5.4,15.2-10.9,22.8-16.3c2.2-2.2,5.4-4.3,7.6-6.5c-12,10.9-23.9,22.8-33.7,34.8c-7.6,8.7-15.2,17.4-19.6,28.3    c-2.2,4.3-4.3,9.8,0,14.1s15.2-3.3,18.5-5.4c6.5-4.3,10.9-9.8,16.3-15.2c4.3-5.4,8.7-10.9,12-16.3c4.3-7.6,8.7-16.3,13-23.9    c0-1.1,1.1-2.2,1.1-3.3c0,0,0,1.1-1.1,1.1c-5.4,12-7.6,25-12,38c-3.3,13-9.8,23.9-8.7,39.1c0,4.3,1.1,21.7,8.7,12    c10.9-10.9,13-28.3,15.2-43.5c2.2-13,4.3-25,8.7-35.9c0,2.2,0,3.3,0,5.4c-1.1,8.7-1.1,18.5,0,27.2c1.1,13,4.3,31.5,10.9,40.2    c4.3,5.4,8.7,5.4,10.9,5.4c1.1,1.1,2.2,3.3,4.3,3.3c4.3,1.1,6.5-4.3,7.6-7.6c6.5-18.5,3.3-37-2.2-55.4c-2.2-9.8-5.4-18.5-8.7-28.3    c0-1.1-1.1-2.2-1.1-3.3c3.3,6.5,6.5,12,9.8,18.5c5.4,9.8,9.8,19.6,15.2,27.2c5.4,6.5,9.8,12,16.3,17.4c5.4,4.3,13,10.9,20.7,9.8    c9.8-1.1,1.1-16.3-1.1-20.7c-5.4-10.9-14.1-20.7-21.7-30.4c-1.1-1.1-5.4-5.4-7.6-7.6c-6.5-6.5-8.7-8.7-15.2-17.4    c14.1,15.2,29.3,29.3,47.8,38c6.5,3.3,16.3,6.5,23.9,4.3c8.7-2.2-1.1-13-4.3-15.2l-1.1-1.1c1.1-1.1,5.4,1.1,6.5,1.1    c3.3,0,6.5,0,9.8-1.1c8.7-5.4-7.6-19.6-12-21.7c-5.4-4.3-10.9-7.6-17.4-10.9l0,0c-8.7-4.3-19.6-8.7-28.3-13c3.3,1.1,8.7,2.2,12,2.2    c4.3,1.1,8.7,2.2,13,2.2c8.7,1.1,18.5,1.1,27.2,0c4.3-1.1,15.2-2.2,14.1-8.7c0-3.3-6.5-5.4-8.7-7.6c-4.3-2.2-9.8-3.3-14.1-4.3    c-6.5-1.1-14.1-2.2-20.7-3.3c-3.3-1.1,2.2-1.1,3.3-1.1c8.7-2.2,15.2-4.3,21.7-7.6c5.4-2.2,9.8-5.4,13-9.8c2.2-2.2,4.3-4.3,4.3-7.6    c0-3.3-4.3-4.3-6.5-4.3c-13-1.1-27.2,4.3-40.2,8.7c-7.6,2.2-16.3,4.3-23.9,6.5c-6.5,2.2-12,4.3-18.5,5.4c15.2-6.5,30.4-12,44.6-21.7    c5.4-3.3,9.8-6.5,15.2-10.9c3.3-3.3,9.8-9.8,8.7-15.2s-6.5-5.4-10.9-5.4c-7.6,1.1-14.1,3.3-20.7,7.6c-16.3,8.7-30.4,19.6-43.5,32.6    c0,0-2.2,2.2-3.3,2.2c0,0,3.3-3.3,3.3-4.3c2.2-2.2,4.3-5.4,6.5-7.6c5.4-6.5,9.8-12,14.1-18.5c6.5-9.8,12-20.7,15.2-31.5    c1.1-3.3,3.3-10.9,0-13s-7.6,0-10.9,2.2c-4.3,3.3-7.6,6.5-10.9,10.9c-1.1,1.1-6.5,9.8-7.6,9.8s0-2.2,0-3.3    c1.1-8.7,3.3-17.4-1.1-26.1c-1.1-2.2-4.3-4.3-7.6-3.3c-6.5,2.2-9.8,12-12,17.4c-7.6,16.3-10.9,32.6-13,50c0,2.2,0,4.3-1.1,6.5    c0-6.5,0-14.1,0-20.7C121.7,37,117.4,12,108.7,1.1c2.2,3.3,0,1.1-1.1,0c-7.6-2.2-8.7,7.6-9.8,12c0,4.3,0,9.8,0,14.1    c0,1.1,0,3.3,0,4.3c-2.2-5.4-5.4-10.9-8.7-16.3c-2.2-4.3-4.3-9.8-7.6-10.9c-4.3-1.1-4.3,8.7-3.3,14.1c1.1,13,6.5,27.2,12,38    c3.3,6.5,5.4,13,9.8,18.5c-7.6-9.8-16.3-20.7-22.8-27.2C72.8,42.4,68.5,38,63,33.7c-3.3-2.2-7.6-6.5-10.9-6.5    c-5.4,0-3.3,8.7-2.2,14.1c4.3,12,13,21.7,20.7,30.4c9.8,10.9,31.5,27.2,32.6,28.3C88,90.2,73.9,77.2,57.6,67.4    c-4.3-3.3-9.8-5.4-15.2-8.7c-4.3-2.2-8.7-5.4-14.1-4.3c-6.5,0-4.3,7.6-2.2,12c5.4,9.8,14.1,16.3,21.7,21.7    c10.9,6.5,22.8,10.9,34.8,15.2c-8.7-2.2-18.5-5.4-29.3-7.6s-22.8-4.3-34.8-4.3c-4.3,0-13-1.1-16.3,2.2c-2.2,3.3-1.1,5.4,1.1,7.6    c4.3,5.4,12,7.6,17.4,10.9c7.6,3.3,15.2,4.3,22.8,5.4c8.7,1.1,18.5,1.1,28.3,1.1c3.3,0,5.4,0,7.6,0c-9.8,2.2-19.6,3.3-29.3,4.3    c-12,2.2-26.1,5.4-35.9,9.8c-2.2,1.1-7.6,4.3-7.6,6.5C6.5,141.3,7.6,142.4,8.7,143.5z"/></svg>');

    canvas = new fabric.Canvas('canvas');

    fabric.loadSVGFromString(svg, function(objects, options) {
      var obj = fabric.util.groupSVGElements(objects, options);
      canvas.add(obj).centerObject(obj).renderAll();
      obj.setCoords();
    });

});

编辑:

这是一个正确解析渐变的示例，在 canvas2 中 loadSVGFromURL 在 IE9 中不起作用: http://jsfiddle.net/t8bx5/1/

另一个梯度不正确/缺失的例子: http://jsfiddle.net/t8bx5/2/

Answer 1

原因可能是在 radialGradient 定义中存在“gradientTransform”属性。

请看本期:https://github.com/kangax/fabric.js/issues/1554