Html 放大的SVG在Safari中有模糊的文本

我还没有找到解决这个问题的办法。我尝试了很多webkit css的东西。 也许我用错了元素，或者根本不起作用

我正在将一个SVG的文本缩放到2000vh。我的期望是SVG应该看起来不错，因为它是基于向量的。我的期望在3/4浏览器中得到了满足

chrome、firefox和edge（确实是）：

狩猎：

---

我建议使用另一种解决方案来实现相同的效果（）：

.结果{
背景图像：url（“数据：image/svg+xml；utf8，REFORMATION”）；
背景尺寸：50vh自动；
高度：100vh；
}

这是另一种解决方案-

主要的想法是我们可以增加字体大小，并减少高度，顶部和左侧

.st2{font-size:88px;}

#Layer_1 {
    height: 550vh;
    top: -250vh;
    left: -250vh;
}

---

在我的示例中，我使用4x。它仍然不理想，但您可以增加系数。

也许小提琴不够清晰。但我也尝试将SVG用作掩码，此外，我还需要能够从javascript更改SVG文本。这就是为什么我认为你的解决方案只会带来比现在解决的问题更多的问题。更好的是，我将根据你的例子为你提供另一种方法。我需要扩大它的响应设计的原因。但5倍vh可能就足够了。我试试这个。

<div class="result"></div>

.result {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20px' width='147px'><text x='0' y='15' fill='#000' font-size='20'>REFORMATION</text></svg>");
  background-size: 50vh auto;
  height: 100vh;
}

.st2{font-size:88px;}

#Layer_1 {
    height: 550vh;
    top: -250vh;
    left: -250vh;
}