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)";

CodePudding user response：

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.

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';
document.body.appendChild(svgElem);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here's the original image: