Estoy tratando de aplicar un filtro al cuerpo de mi página usando filter: url(#filter_id) , pero no logro que funcione.

Así es como lo estoy agregando al estilo:

 document.body.style.filter = 'url("#filter_id")'

y así es como estoy creando el filtro

 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') svg.setAttribute("width","0" ) svg.setAttribute("height","0" ) var filter = document.createElement("filter"); filter.setAttribute("id","filter_id" ) var feColorMatrix = document.createElement("feColorMatrix") feColorMatrix.setAttribute("type","matrix") feColorMatrix.setAttribute("values","1 1 1 1 0 0 1 1 1 0 0 0 1 0 0 0 0 0 1 0") filter.appendChild(feColorMatrix) svg.appendChild(filter) document.body.prepend(svg)

esto crea el elemento de filtro en la parte superior del cuerpo:

 <filter id="filter_id"> <fecolormatrix type="matrix" values="1 1 1 1 0 0 1 1 1 0 0 0 1 0 0 0 0 0 1 0"/> </filter>

¿Cómo puedo aplicarlo a la página completa para que cada elemento obtenga el cambio de color que pretendo? Por contexto, esto se emplea actualmente en una extensión de Chrome que estoy desarrollando.

Si hago otros tipos de filtros funciona (se aplica a la página completa)

 document.body.style.filter = "blur(1px)"