Answered SVG clip-path problem.

- 6 Posts
isaac1 Reply #1, 11 years, 1 month ago

Ok, so I have an svg clipping path working on codepen, here: http://codepen.io/isaacsgraphic/pen/qdgBBL
and since this way of clipping is supported by most browsers, it works in firefox.
However, when I take the exact same code and use it within ModX, the clip-path no longer works in firefox, although it still works in chrome.

Any ideas on what might be going wrong?
This question has been answered by isaac1. See the first response.

discuss.answer

6 Posts

isaac1 Reply #2, 11 years, 1 month ago

It's a general problem caused by using an external (linked) stylesheet. it can be fixed either by referencing the full url in the styles file ie

-webkit-clip-path: url("index.html#flag-right");
clip-path: url("index.html#flag-right");

or using a mini internal stylesheet within the relevant html page:

<style>
    .clip-flag-right {
        -webkit-clip-path: url("#flag-right");
        clip-path: url("#flag-right");
    }
    
    .clip-flag-left {
        -webkit-clip-path: url("#flag-left");
        clip-path: url("#flag-left");
    }
</style>