0
95
Viewsbackground-blend-mode for SVG
I am create SVG element in JS like this:
var svgElem = document.createElementNS(xmls,"svg");
svgElem.setAttributeNS(null,"viewBox","0 0 500 500");
svgElem.setAttributeNS(null,"width","500");
svgElem.setAttributeNS(null,"height","500");
svgElem.style.backgroundImage = "url(imageUrl)";
svgElem.style.backgroundSize = "cover";
now I wanna set background-blend-mode: difference for SVG element in JS how I can do it?
also I wanna set filter to SVG element but do not work with
svgElem.style.filter = "hue-rotate(180deg) saturate(2)";
·
Juan Pablo Isaza
1 answers
Answer question0
You can set the background-blend-mode in style attribute in the same way as you have set the other styles. But it needs something to blend with so this snippet gives it a background-color as well.
UPDATE: the question was expanded to include a requirement to add filter property as well. This snippet has been altered to include that and it seems to work fine.
var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElem.setAttributeNS(null, "viewBox", "0 0 500 500");
svgElem.setAttributeNS(null, "width", "500");
svgElem.setAttributeNS(null, "height", "500");
svgElem.style.backgroundImage = "url(https://i.stack.imgur.com/qCIve.jpg)";
svgElem.style.backgroundSize = "cover";
svgElem.style.backgroundColor = 'red';
svgElem.style.backgroundBlendMode = 'difference';
svgElem.style.filter = "hue-rotate(180deg) saturate(2)";
document.body.appendChild(svgElem);Here's the original image:
·
Juan Pablo Isaza
Report
Answer question