SVG文本線性漸變可剪切文本[Safari]

Question

我正在嘗試通過<svg>將線性漸變添加到<text>標記中，並且它適用於大多數瀏覽器，但Safari v8 +除外，在Safari v8 +中 ，文本的一部分似乎被剪切了。

我認為這有問題：

• 字體家族：Playfair，呈現方式（嘗試在加載時等待並在之后注入svg，但最終得到相同的結果
• 缺少viewbox屬性：嘗試添加它，似乎變化不大，或與此問題無關（我可能錯了）
• 不正確的代碼？ -在其他瀏覽器中似乎正常運行

這是一個代碼片段和一個代碼筆 。

任何幫助深表感謝。

 @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

經過linearGradient修改之后，我只能得出結論，這是font-family和linearGradient在Safari linearGradient無法正常工作的問題。

因此，我要做的是在<text>標記內插入<tspan>&nbsp;</tspan> ，這樣就可以推送404文本並顯示“裁剪”區域。 然后，我在<text>上添加了一個transform: translate(-30) （根據情況可能需要一些微調），主要是因為  太過推文了。

它不是最優雅的解決方案，但是它可以工作，我不確定這個字體系列和漸變是什么問題，但至少現在它可以正常工作（“ ish”）。

這是最終的標記和代碼筆 ，以防有人遇到此問題。

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