SVG文本线性渐变剪切文本[Safari]

Question

我尝试通过<text>向<svg>标记添加线性渐变，它适用于大多数浏览器，但 Safari v8 + 除外文本的一部分似乎被修剪。

我认为它有问题：

• 字体系列：Playfair，它渲染的方式（尝试等待加载并注入svg之后，但最终结果相同
• 缺少viewbox attr。：尝试添加它，似乎没有太大变化，或与此问题无关（我可能错了）
• 代码不正确？ - 似乎在其他浏览器中表现得很好

这是一个代码段和一个codepen。

非常感谢任何帮助。

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700italic);

.not-found{
  font-size: 270px;
  font-family: 'Playfair Display';
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这里和那里做了一些更改之后，我只能得出结论，这是font-family和linearGradient在safari下运行不佳的问题。

所以我做的是在<tspan>&nbsp;</tspan>标记内插入<text>，这样就可以推送404文字并显示“裁剪”字样。区域。然后我向transform: translate(-30)添加了<text>（可能需要根据具体情况进行一些微调），主要是因为 将文本推得太多。

它不是最优雅的解决方案，但它有效，我不确定此字体系列和渐变的问题是什么，但至少现在它正常工作（＆＃39; ish＆＃39;）

这是最终的标记和codepen，以防有人遇到此问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;