我正在使用Fabricjs创建一个应用程序。我必须向画布添加一个 SVG 文件,并在每次Minicolors
输入发生变化
时更改颜色。
我首先让浏览器将 SVG 图像显示为 SVG 代码,如下所示:
$('img[src$=".svg"]').each(function(){
var $img = $(this),
imgURL = $img.attr('src'),
attributes = $img.prop('attributes');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Make sure that every attribute was copied
$.each(attributes, function() {
$svg.attr(this.name, this.value);
});
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
Run Code Online (Sandbox Code Playgroud)
然后,当单击 SVG 图像时,我将它们从 DOM 加载到画布上,如下所示: …