Wordpress CSS and Inline SVG

Issue

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?

Solution

Though it wasn't entirely clear in the question/answer you linked to, you will have to add that clip-path css tidbit in a <style></style> tag inside the single-projects.php template. Basically the svg and the css code have to be in the same file for the css to find the svg by id.

Hopefully this helps. You can find a jsfiddle here (taken from this answer).

Answered By - Jalen Davenport