0
98
Vistasmodo de mezcla de fondo para SVG
Estoy creando un elemento SVG en JS así:
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";ahora quiero configurar el modo de mezcla de fondo: diferencia para el elemento SVG en JS, ¿cómo puedo hacerlo?
también quiero configurar el filtro para el elemento SVG pero no funciona con
svgElem.style.filter = "hue-rotate(180deg) saturate(2)";
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede configurar el modo de fusión de fondo en el atributo de estilo de la misma manera que ha configurado los otros estilos. Pero necesita algo con lo que combinarse, por lo que este fragmento también le da un color de fondo.
ACTUALIZACIÓN: la pregunta se amplió para incluir un requisito para agregar también la propiedad de filtro. Este fragmento se ha modificado para incluir eso y parece funcionar bien.
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);Aquí está la imagen original:
·
Juan Pablo Isaza
Denunciar
Responde la pregunta