clipPath on webkit does not render

Question

Enthused by this article, I tried to apply a gradient clip-path to my relatively simple shape (an O letter converted to curves).

It works perfectly under Firefox, but as soon as I try it under a webkit, I see absolutely nothing.

I've tried to fix it, I've split it in simple parts, trying both Amit Sheen code with mine, and the only thing that make it fail is using my path instead of his. If I don't use clipPath, the path is rendered as expected, but as soon as I clip it, it just vanishes. I can't figure out what the problem is.

Can you help me?

.gradient {
    width: 157px;
    height: 157px;
    background: linear-gradient(90deg, rgba(6,94,115,0.7959383582534576) 0%, rgba(207,241,255,1) 100%); 
    border-radius: 50%;
}

user_7897395 · Answer

You may need to transform your path so that it's left upper corner falls in the point (0,0). This is needed in chrome but won't work in firefox unless the foreign object has x="0" y="0". For this reason instead of giving a x and y attributes to the foreign object I translated it to the needed point.

svg{background:silver}

clipPath on webkit does not render

1 Answers