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浏览器]

回答

相关问题