Changing color of an SVG.Use element in js

I am using the library SVG.js and here's a piece of my code

var main_field = SVG('field');

var rn = main_field.defs().image('rn.png',70,70);

var a = main_field.use(rn).move(70,70);

Now I'd like to manipulate the colors of the image, but

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

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

both do nothing. The only attribute I can change seems to be the opacity

a.opacity(0.2);

Is there a way to change the color of the image, or I must overlay an uniform image filled with the color to obtain the effect?

asked Jan 2 at 12:03

Exodd

1566

1

fill and stroke properties have no effect for <image> elements (as that would be properties its content), but opacity has (it just describes how to blend the image with its background). What is it exactly you want to achieve?

– ccprog
Jan 2 at 13:25

As ccprog said, changing the color of the image (rn.png) in that manner is not possible. You could possibly do it with filters, depending on the desired result. Can you provide more detail on what the end result should be?

– Ted
Jan 2 at 14:29

@Ted I'm trying to overlay a uniform color onto the image (like fill does with rect,etc.) or produce a border to the image (like stroke does)

– Exodd
Jan 2 at 17:35

add a comment |

I am using the library SVG.js and here's a piece of my code

var main_field = SVG('field');

var rn = main_field.defs().image('rn.png',70,70);

var a = main_field.use(rn).move(70,70);

Now I'd like to manipulate the colors of the image, but

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

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

both do nothing. The only attribute I can change seems to be the opacity

a.opacity(0.2);

Is there a way to change the color of the image, or I must overlay an uniform image filled with the color to obtain the effect?

asked Jan 2 at 12:03

Exodd

1566

1

fill and stroke properties have no effect for <image> elements (as that would be properties its content), but opacity has (it just describes how to blend the image with its background). What is it exactly you want to achieve?

– ccprog
Jan 2 at 13:25

As ccprog said, changing the color of the image (rn.png) in that manner is not possible. You could possibly do it with filters, depending on the desired result. Can you provide more detail on what the end result should be?

– Ted
Jan 2 at 14:29

@Ted I'm trying to overlay a uniform color onto the image (like fill does with rect,etc.) or produce a border to the image (like stroke does)

– Exodd
Jan 2 at 17:35

add a comment |

I am using the library SVG.js and here's a piece of my code

var main_field = SVG('field');

var rn = main_field.defs().image('rn.png',70,70);

var a = main_field.use(rn).move(70,70);

Now I'd like to manipulate the colors of the image, but

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

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

both do nothing. The only attribute I can change seems to be the opacity

a.opacity(0.2);

Is there a way to change the color of the image, or I must overlay an uniform image filled with the color to obtain the effect?

asked Jan 2 at 12:03

Exodd

1566

I am using the library SVG.js and here's a piece of my code

var main_field = SVG('field');

var rn = main_field.defs().image('rn.png',70,70);

var a = main_field.use(rn).move(70,70);

Now I'd like to manipulate the colors of the image, but

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

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

both do nothing. The only attribute I can change seems to be the opacity

a.opacity(0.2);

Is there a way to change the color of the image, or I must overlay an uniform image filled with the color to obtain the effect?

image svg colors svg.js

asked Jan 2 at 12:03

Exodd

1566

asked Jan 2 at 12:03

Exodd

1566

asked Jan 2 at 12:03

Exodd

1566

asked Jan 2 at 12:03

Exodd

1566

asked Jan 2 at 12:03

Exodd

1566

1

fill and stroke properties have no effect for <image> elements (as that would be properties its content), but opacity has (it just describes how to blend the image with its background). What is it exactly you want to achieve?

– ccprog
Jan 2 at 13:25

As ccprog said, changing the color of the image (rn.png) in that manner is not possible. You could possibly do it with filters, depending on the desired result. Can you provide more detail on what the end result should be?

– Ted
Jan 2 at 14:29

@Ted I'm trying to overlay a uniform color onto the image (like fill does with rect,etc.) or produce a border to the image (like stroke does)

– Exodd
Jan 2 at 17:35

add a comment |

1

fill and stroke properties have no effect for <image> elements (as that would be properties its content), but opacity has (it just describes how to blend the image with its background). What is it exactly you want to achieve?

– ccprog
Jan 2 at 13:25

As ccprog said, changing the color of the image (rn.png) in that manner is not possible. You could possibly do it with filters, depending on the desired result. Can you provide more detail on what the end result should be?

– Ted
Jan 2 at 14:29

@Ted I'm trying to overlay a uniform color onto the image (like fill does with rect,etc.) or produce a border to the image (like stroke does)

– Exodd
Jan 2 at 17:35

fill and stroke properties have no effect for <image> elements (as that would be properties its content), but opacity has (it just describes how to blend the image with its background). What is it exactly you want to achieve?

– ccprog
Jan 2 at 13:25

As ccprog said, changing the color of the image (rn.png) in that manner is not possible. You could possibly do it with filters, depending on the desired result. Can you provide more detail on what the end result should be?

– Ted
Jan 2 at 14:29

@Ted I'm trying to overlay a uniform color onto the image (like fill does with rect,etc.) or produce a border to the image (like stroke does)

– Exodd
Jan 2 at 17:35

add a comment |

1 Answer
1

active

oldest

votes

You cannot change the stroke or fill of an image. However, you can change fill and stroke of a rectangle. You can use that by creating a symbol which contains the image and a rectangle on top of it. When you apply a fill or stroke to the <use> element, it will look like the image has the fill / stroke:

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

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

answered Jan 2 at 19:04

Fuzzyma

3,18821540

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54006027%2fchanging-color-of-an-svg-use-element-in-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

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

answered Jan 2 at 19:04

Fuzzyma

3,18821540

add a comment |

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

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

answered Jan 2 at 19:04

Fuzzyma

3,18821540

add a comment |

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

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

answered Jan 2 at 19:04

Fuzzyma

3,18821540

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

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

answered Jan 2 at 19:04

Fuzzyma

3,18821540

answered Jan 2 at 19:04

Fuzzyma

3,18821540

answered Jan 2 at 19:04

Fuzzyma

3,18821540

answered Jan 2 at 19:04

Fuzzyma

3,18821540

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu