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

Question

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

我认为它有问题:

• 字体系列:Playfair，它的呈现方式(尝试等待加载并在之后注入(inject) 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>

Answer 1

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

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

这不是最优雅的解决方案，但它可以工作，我不确定这个字体系列和渐变有什么问题，但至少现在它可以正常工作('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>