Question

我在画布上创建了一个rect。创建后，我用test.svg更改背景图案。它有效，这里没问题。我想要做的是改变背景图案的颜色。在svg里面，我有一个点。我只想更改svg中的点颜色，但不喜欢“fill：color”，只是点。这可能吗？我寻找像源颜色等，但我找不到解决方案。

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?

Answer 1

我从未使用过fabric.Pattern()，但我认为这只是制作context.createPattern（）的另一种方法。

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

唯一的解决方案是将其他文档加载到另一个<img>标记（或此处转换为另一个fabric.Pattern()对象），该标记已经具有正确的颜色。

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

＆＃13;

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

＆＃13;

#svg {
  display: none;
}

＆＃13;

<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>

＆＃13;

更改加载的源颜色

1 个答案: