SVG的文本線性漸變削減文本[Safari瀏覽器]

我試圖爲線性漸變添加到<text>標籤，通過<svg>，它適用於大多數的瀏覽器，除了在Safari瀏覽器V8 +，其中文本的一部分似乎剪輯。SVG的文本線性漸變削減文本[Safari瀏覽器]

我想它要麼不對勁：

字體家族：普萊費爾，途中其渲染（試圖等待負荷和後注入的SVG，但最終結果相同
失蹤viewbox ATTR：嘗試添加它，似乎並沒有太大變化，或不涉及這個問題（我可能是錯的）
不正確的代碼 - 似乎在其他瀏覽器檢點

這裏有一個代碼片段和一個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>

來源

2016-06-10 RGLSV

這裏有一些變化，我只能說這是與font-family和linearGradient都不盡如人意下Safari瀏覽器的問題。

所以我所做的就是在<text>標籤內插入一個<tspan> </tspan>，這樣就可以推動404文本並顯示「裁剪」區域。然後，我添加了一個transform: translate(-30)（可能需要根據情景進行一些微調），主要是因爲 將文本推得太多。

它不是最優雅的解決方案，但它的工作原理，我不知道這個字體家族和漸變有什麼問題，但至少現在它工作正常（'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>

來源

2016-06-10 14:09:00 RGLSV

SVG的文本線性漸變削減文本[Safari瀏覽器]

回答

相關問題