更改加载的源颜色答案

【问题标题】：Change loaded source color更改加载的源颜色
【发布时间】：2016-03-10 11:22:51
【问题描述】：

我在画布上创建了一个矩形。创建后，我用 test.svg 更改背景图案。它工作正常，这里没有问题。我想要做的是改变背景图案的颜色。在 svg 里面，我有一个点。我只想更改 svg 中的点颜色，但不像“填充：颜色”，只是点。这可能吗？我在寻找诸如源颜色等之类的东西，但我找不到解决方案。

var test = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
});


test.fill = new fabric.Pattern({
  source: "test.svg",
  repeat: 'repeat',
});


// add canvas etc here...
// change the color of svg pattern. should be something like test.source.color?

【问题讨论】：

标签： javascript canvas svg fabricjs

【解决方案1】：

我从未使用过fabric.Pattern()，但我想这只是制作 context.createPattern()` 的另一种方式。

为此，您必须首先将 svg 加载到 <img> 标记中。此操作将阻止 svg 文档的某些容量，例如通过任何外部手段更改内部元素的颜色。

唯一的解决方案是将另一个文档加载到另一个 <img> 标记中（或者这里加载到另一个 fabric.Pattern() 对象中），它已经具有正确的颜色。

避免大量 svg 文件只进行很小更改的一种方法是在 <img> 标签中加载一次 svg，not（它可以直接放入文档中，带有DOMParser、<object> 或 <iframe>)，然后用所需的更改编辑您的文档，并将其 dataURI 版本传递给 fabric.Pattern 构造函数。

var changeSVGColor = function(color) {
  // update the color
  SVGCircle.setAttribute('fill', color);
  // get the svg data as a string
  var svgData = (new XMLSerializer()).serializeToString(svg);
  // transfrom it to a dataURL
  var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);

  return svgURL;
}

var loadPattern = function(url) {
  fabric.util.loadImage(url, function(img) {
    test.fill = new fabric.Pattern({
      source: img,
      repeat: 'repeat'
    });
    canvas.renderAll();
  });
}

var canvas = new fabric.Canvas('c');
var test = new fabric.Rect({
  left: 0,
  top: 0,
  width: 300,
  height: 300,
});
canvas.add(test);

loadPattern(changeSVGColor('blue'));



btn.onclick = function() {
  loadPattern(changeSVGColor('red'));
}

#svg {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>

<svg id="svg" width="20" height="20">
  <circle id="SVGCircle" cx="10" cy="10" r="10" />
</svg>
<button id="btn">change color</button>
<canvas id="c"></canvas>

【讨论】：