SVG text linear gradient cuts text [Safari]

Question

I'm trying to add a linear gradient to a <text> tag, via <svg> , and it works in most browsers, except on Safari v8+ , where a part of the text seems to get clipped.

I figure its either something wrong with:

• font family: Playfair, the way its rendered (tried waiting on load and injected the svg after, but ended up with the same result
• missing viewbox attr.: tried adding it, doesn't seem to change much, or not related to this issue (I may be wrong)
• incorrect code? - seems to behave properly in other browsers

Here's a code snippet and a codepen to go along.

Any help is much appreciated.

 @import url(https://fonts.googleapis.com/css?family=Playfair+Display:700italic); .not-found{ font-size: 270px; font-family: 'Playfair Display'; } 

 <svg width="100%" height="190px" class="not-found"> <defs> <linearGradient id="text" x1="0" y1="0" x2="0" y2="100%"> <stop stop-color="green" offset="0"/> <stop stop-color="red" offset="100%"/> </linearGradient> </defs> <text text-anchor="middle" x="50%" y="50%" dy="50px" fill="url(#text)"> 404 </text> </svg> 

Answer 1

After a few changes here and there, I can only conclude that it is a issue with the font-family and the linearGradient not working well under safari.

So what I did was to insert a <tspan>&nbsp;</tspan> inside the <text> tag, so this way it would push the 404 text and reveal 'cropped' area. Then I added a transform: translate(-30) (may need some fine tuning depending on the scenario) to the <text> mainly because the   was pushing the text out too much.

Its not the most elegant solution, but it works, I'm not sure what is the issue with this font family and the gradient, but at least now it works properly ('ish').

Here's the final markup and codepen , in case someone runs into this issue.

 @import url(https://fonts.googleapis.com/css?family=Playfair+Display:700italic); .not-found text{ font-size: 200px; font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic; } 

 <!--old stuff--> <svg width="100%" height="190px" class="not-found"> <defs> <linearGradient id="text" x1="0" y1="0" x2="0" y2="100%"> <stop stop-color="green" offset="0"/> <stop stop-color="red" offset="100%"/> </linearGradient> </defs> <text text-anchor="middle" x="50%" y="50%" dy="50px" fill="url(#text)"> 404 </text> </svg> <!--new stuff--> <svg width="100%" height="190px" class="not-found"> <defs> <linearGradient id="text" x1="0" y1="0" x2="0" y2="100%"> <stop stop-color="green" offset="0"/> <stop stop-color="red" offset="100%"/> </linearGradient> </defs> <text transform='translate(-30)' text-anchor="middle" x="50%" y="50%" dy="50px" fill="url(#text)"> <tspan>&nbsp;<tspan> 404 </text> </svg>