SVG текст линейного сокращение градиентного текст [Safari]

Question

Я пытаюсь добавить линейный градиент к <text> тегу, с помощью <svg>, и он работает в большинстве браузеров, за исключением Safari v8 +, где часть текста кажется получить обрезанный.

Я полагаю, что его либо что-то неправильно с:

• семейство шрифтов: Playfair, как его оказал (пытался ожидание нагрузки и вводили SVG после, но в итоге с тем же результатом
• отсутствующего viewbox атр .: пытались добавить его, кажется, не изменится, или не имеет отношения к этому вопросу (я могу ошибаться)
• неверный код? - кажется, правильно вести себя в других браузерах

Вот фрагмент кода и codepen.

Любая помощь очень ценится.

@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

После нескольких изменений здесь и там, я могу только сделать вывод, что это проблема с font-family и linearGradient не работает хорошо под сафари.

Так что я сделал это, чтобы вставить <tspan>&nbsp;</tspan> в тег <text>, так что таким образом он будет толкать текст 404 и обнаруживать область «обрезанной». Затем я добавил transform: translate(-30) (может потребоваться тонкая настройка в зависимости от сценария) до <text> главным образом потому, что   слишком сильно выталкивал текст.

Это не самое элегантное решение, но оно работает, я не уверен, в чем проблема с этим семейством шрифтов и градиентом, но по крайней мере теперь он работает правильно ('ish').

Вот окончательная разметка и codepen, если кто-то столкнется с этой проблемой.

@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>