キャンバス上でsvgの色を変更する方法 - Fabricjs

Question

Fabricjsでアプリを作成しています。
Minicolors入力が変更されるたびに、SVGファイルをキャンバスに追加して色を変更する必要があります。
私は最初のブラウザがそうのようなSVGコードとしてSVG画像を表示作っ：

$('#images').on('click', 'svg', function() { 
    var serializer = new XMLSerializer(), 
    svgStr = serializer.serializeToString(this); 

    fabric.loadSVGFromString(svgStr,function(objects, options) { 
    options.id = this.id; 
    var obj = fabric.util.groupSVGElements(objects, options); 

    canvas.add(obj); 

    obj.scaleToHeight(127) // Scales it down to some small size 
     .scaleToWidth(90) 
     .center() // Centers it (no s**t, Sherlock) 
     .setCoords(); 

    canvas.setActiveObject(obj).renderAll(); 
    }); 
}); 

：彼らがクリック取得するとき

$('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'); 
}); 

は、その後、私はそうのように、キャンバスにDOMからSVG画像をロード

次の目標は、選択したsvgファイルのパスの色を変更する方法です。 私の主な推測では、以下の手順を実行し、次のようになります。選択したSVG

変更DOM

でSVG画像の色の

1. 保存左と上の位置選択SVGオブジェクトを削除し
2. が保存左と上の位置

で新しい色を使用して新しいSVGとそれを交換してくださいしかし、私は考えた：「だから私はそれがPEれることはありませんMinicolors入力が変化し、すべてのこのすべての時間を行う必要がありますか？後で履行問題？

これよりも優れたアプローチがありますか？ここでは、あなたが始められるJSFiddleがあります。ありがとう。

Answer 1

キャンバスに追加すると、SVGオブジェクトには「パス」という名前のプロパティが含まれます。このプロパティには、画像を構築するすべてのパスが含まれます。だから我々はやる：

activeObject.paths.forEach(function(path) {path.fill = color}); 

しかし、それは（私はうまくいけば、その時点までに取得することはできません）巨大なSVGファイルのパフォーマンスの問題ではないだろうかなあ。ここには働いてJSFiddleです。