[英]SVG text linear gradient cuts text [Safari]
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. 我正在尝试通过<svg>
将线性渐变添加到<text>
标记中,并且它适用于大多数浏览器,但Safari v8 +除外,在Safari v8 +中 ,文本的一部分似乎被剪切了。
I figure its either something wrong with: 我认为这有问题:
viewbox
attr.: tried adding it, doesn't seem to change much, or not related to this issue (I may be wrong) 缺少viewbox
属性:尝试添加它,似乎变化不大,或与此问题无关(我可能错了) 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>
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. 经过linearGradient
修改之后,我只能得出结论,这是font-family
和linearGradient
在Safari linearGradient
无法正常工作的问题。
So what I did was to insert a <tspan> </tspan>
inside the <text>
tag, so this way it would push the 404 text and reveal 'cropped' area. 因此,我要做的是在<text>
标记内插入<tspan> </tspan>
,这样就可以推送404文本并显示“裁剪”区域。 Then I added a transform: translate(-30)
(may need some fine tuning depending on the scenario) to the <text>
mainly because the
然后,我在<text>
上添加了一个transform: translate(-30)
(根据情况可能需要一些微调),主要是因为
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'). 它不是最优雅的解决方案,但是它可以工作,我不确定这个字体系列和渐变是什么问题,但至少现在它可以正常工作(“ 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> <tspan> 404 </text> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.