fabric.loadSVGFromString导致结果失真 [英] Distorted result with fabric.loadSVGFromString
问题描述
我已经使用inkscape编辑了一个SVG:
I've edited an SVG with inkscape :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2816" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs id="defs2818"></defs>
<metadata id="metadata2821">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1" stroke-linejoin="miter" stroke="#ce3762" stroke-linecap="butt">
<path id="path2828" style="stroke-dasharray:none;" d="M40,3,35,3,20,18,10,18s-5,5,0,10h10l15,15h5v-40z" transform="translate(-5,0)" stroke-miterlimit="4" stroke-width="0.5" fill="#42101e"/>
<path id="path2830" d="m37,13s2,7.5359,0,15" transform="translate(0,2)" stroke-width="1px" fill="none"/>
<path id="path2834" d="m40,11s3,10,0,19" transform="translate(0,2)" stroke-width="1px" fill="none"/>
<path id="path2836" d="m43,6s6,14,0,29" transform="translate(0,2)" stroke-width="1px" fill="none"/>
</g>
</svg>
它应如下所示:
当我导入时fabricjs:
When I import it with fabricjs :
// volumeOnPrint is the string pasted before
fabric.loadSVGFromString(volumeOnPrint, function(objects, options) {
var widget = new fabric.PathGroup(objects, options);
// root is my fabricjs canvas
root.add(widget);
});
它得到:
(背景不是问题,这是我的画布之一)
(The background is not the issue, it's the one of my canvas)
推荐答案
原来这是Fabric中的一个错误。
Turns out this was a bug in Fabric.
我只是修复并推送新版本(0.9 .21)。
I just fixed it and pushed new version (0.9.21).
通常,使用Inkscape创建的SVG文件比使用Illustrator创建的文件更难解析。但是我们越来越好了:)
Generally, SVG files created with Inkscape are harder to parse than those created with Illustrator. But we're getting better and better :)
越来越多视觉测试套件,我添加了你的形状,以避免将来的回归(让我知道,如果没关系)。小心,因为加载/解析所有形状可能需要一段时间。
There's a growing visual test suite, to which I added your shape to avoid regressions in the future (let me know if that's OK). Careful as it might take a while to load/parse all the shapes.
这篇关于fabric.loadSVGFromString导致结果失真的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!