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


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: