Geek Answers Handbook

Built-in SVG HTML5 filters without interfering with the layout

I need to introduce the following built-in SVG filter into my HTML5 document:

<svg> <defs> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"> </filter> </defs> </svg>

I tried to place it outside of the <html> tags, but that didn't work. It leaves a large empty space at the beginning or end of the displayed page, depending on where I put it.

I tried placing it at the <head> or the beginning of the <body> , but this also leaves a lot of blank space at the beginning of the displayed document.

display: none; setting display: none; The SVG object will interfere with the filter.

I also tried setting the <svg> width and height to zero, but this only works if I set the CSS for the svg objects in display: block; .

For instance:

 <!DOCTYPE html> <html> <head> ... <svg> ... </svg> </head> ... </html>

My temporary fix is ​​currently using css to try to hide it:

 svg { height: 0; position: absolute; }

How to prevent an SVG object from interfering with my HTML layout (without using this css trick)?

JsFiddle example

+4
source share
2 answers

Since there are no alternatives, at least with the current technology, I would have to answer: no, it is impossible to prevent the intervention of SVG objects in the HTML layout if one of the above CSS hacks is not used.

As indicated in the original post, the only way to hide the SVG element (without turning off the filter) is:

  • Set the <svg> height and width tag to zero, then set its CSS to display: block .

  • Set the <svg> for CSS height: 0; position: absolute; height: 0; position: absolute;

+1
source

I'm not sure if this works, but SVG elements allow you to use width and height attributes (like img tags). So try: svg width="0" height="0"

+2
source

More articles:


All Articles