Изменение цвета элемента SVG.Use в js - PullRequest
Новая
       6

Изменение цвета элемента SVG.Use в js

0 голосов
/ 02 января 2019

Я использую библиотеку 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);

Есть ли способ изменить цвет изображения, или я должен наложить однородное изображение, заполненное цветом, чтобы получить эффект?

1 Ответ

0 голосов
/ 02 января 2019

Вы не можете изменить обводку или заливку изображения.Однако вы можете изменить заливку и обводку прямоугольника.Вы можете использовать это, создав символ, который содержит изображение и прямоугольник поверх него.Когда вы применяете заливку или обводку к элементу <use>, это будет выглядеть так, как будто изображение имеет заливку / обводку:

svg.js v3.0 code: 

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})
...