Question

我正在使用库SVG.js，这是我的一部分代码

var main_field = SVG('field');
var rn = main_field.defs().image('rn.png',70,70);
var a = main_field.use(rn).move(70,70);

现在我想操纵图像的颜色，但是

a.fill({color: '#f06', opacity: 0.6 });
a.stroke({ color: '#f06', opacity: 1, width: 5 });

什么都不做。我唯一可以更改的属性似乎是不透明度

a.opacity(0.2);

是否可以更改图像的颜色，或者必须覆盖填充有颜色的均匀图像才能获得效果？

Answer 1

您不能更改图像的笔触或填充。但是，您可以更改矩形的填充和笔触。您可以通过创建一个符号来使用该符号，该符号包含图像和在其顶部的矩形。当您对<use>元素应用填充或描边时，看起来图像具有填充/描边：

svg.js v3.0代码：

const width = window.innerWidth
const height = window.innerHeight

const canvas = SVG()
  .addTo('body')
  .size(width, height)

const sym = canvas.symbol()
const image = sym.image('https://images.gutefrage.net/media/fragen/bilder/bild-spiegeln-ohne-das-es-einen-hintergrund-bekommt/0_original.jpg?v=1354472980000', (event, a) => {
  const {width, height} = event.target
  sym.rect(width, height)
})

canvas.use(sym)
  .fill({color: 'red', opacity: 0.5})
  .stroke({color: 'black', width: 2})

svg.js v2.x代码：

const width = window.innerWidth
const height = window.innerHeight

const canvas = SVG('field')

const sym = canvas.symbol()
const image = sym.image('https://images.gutefrage.net/media/fragen/bilder/bild-spiegeln-ohne-das-es-einen-hintergrund-bekommt/0_original.jpg?v=1354472980000').loaded((data) => {
  const {width, height} = data
  sym.rect(width, height)
})

canvas.use(sym)
  .fill({color: 'red', opacity: 0.5})
  .stroke({color: 'black', width: 2})

更改SVG的颜色。js

1 个答案: