0
I’m using filter in the CSS to make an effect, but since it is SVG Filter, I use filter: url('#id'); but in Firefox and Edge browsers they increment a path forward that ends up removing the effect.
How can I fix it? I’m still learning how to deal with SVG and its various ways of working.
Obs.: The filter #grayscale is inside an SVG in the page next to the other svgs, follows:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0">
<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>
</svg>
This is a problem on your server, and not with SVG etc... I made an example and put in Github and opened by Firefox and had no problem... It may be some Webpack of life that you’re using there to compile things or even some Git config... you can test here at FF that you’ll see that filter:url() does not take the full path https://hugocsl.github.io/svg/Gooey.html has to inspect the element for you to see. If you want I can post as an answer...
– hugocsl
I didn’t use anything different, just includes the SVG plus the codes, I don’t know what could be affecting. I’ve had other questions based on SVG, including Wordpress and how it handles the properties of SVG... I ended up solving in the script rs
– Kamile Pimenta
It may be that WP automatically adds a
pathin the image path... but what I can tell you is that this is not standard behavior. Was some other particular cause of your project that made it happen.– hugocsl
I agree, Wordpress wouldn’t let me correctly manipulate the SVG, for example, used JS to change the value of
viewBoxat a certain size and he added meviewbox(all tiny), duplicating the attribute. Also, if you tried to paste the SVG into a widget field, it asked you to turn all attributes into lowercase. I tried to get an answer, but I didn’t get a conclusion in this case.– Kamile Pimenta