更改 SVG 的颜色。在 js 中使用元素答案

【问题标题】：Changing color of an SVG.Use element in js更改 SVG 的颜色。在 js 中使用元素
【发布时间】：2019-01-02 12:03:53
【问题描述】：

我正在使用库 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);

有没有办法改变图像的颜色，或者我必须覆盖一个填充了颜色的均匀图像才能获得效果？

【问题讨论】：

fill 和 stroke 属性对 <image> 元素没有影响（因为这将是其内容的属性），但 opacity 有（它只是描述了如何将图像与其背景）。你到底想达到什么目标？
正如 ccprog 所说，以这种方式更改图像 (rn.png) 的颜色是不可能的。根据所需的结果，您可以使用过滤器来做到这一点。您能否提供更多关于最终结果的详细信息？
@Ted 我正在尝试在图像上叠加一个统一的颜色（就像使用 rect 进行填充等一样）或为图像生成一个边框（就像中风一样）

标签： image svg colors svg.js

【解决方案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})

【讨论】：