WordPress CSS and Inline SVG

I’m trying to use a the clip-path property for an image, and to make it fully compatible with Firefox I need to inline the SVG clipping path and then refer to it in the CSS file using its ID (as described here)

The problem is that once loaded into WordPress, the CSS property URL gets rewritten by WordPress, so it cannot find the actual SVG from the page. I write the following:

clip-path: url("#clipping");

But the full path gets rendered instead (I copy my MAMP URL to clarify):

clip-path: url("http://enzuelo:8888/wp-content/themes/enzuelo-child/single-projects.php#clipping");

Does anybody know how I could reference that ID in the CSS file to make it work with WordPress?

Read more here: WordPress CSS and Inline SVG

Leave a Reply

Your email address will not be published. Required fields are marked *