时间戳

首页 > 解决方案 > 如何在没有 javascript 和跨浏览器一致性的情况下渐变填充由约束 textLength 值缩小的 svg 文本？

html - 如何在没有 javascript 和跨浏览器一致性的情况下渐变填充由约束 textLength 值缩小的 svg 文本？

问题描述

我在我的网站上想要的是一行渐变填充文本。我希望能够修改文本、添加和删除字符，而不用担心它如何适合或对齐单行。即使某人的设备无法加载我设计文本所用的字体，文本的整体宽度也不应该改变，文档承诺我可以这样做textLength：

通过使用 textLength，您可以确保您的 SVG 文本以相同的宽度显示，而不管包括 Web 字体无法加载（或尚未加载）在内的情况。

我没有向您展示我的整个网站，而是拼凑了一个玩具网站 来说明我正在努力实现的目标。这是它在桌面 chrome 中正确呈现的屏幕截图。

这是一个屏幕截图

下面是代码：

<html>
<head>
<style>

 
 svg{
     width:800px;
     height:960px;
     background-color:#cccccc;
 }
</style>
</head>
<body>


<svg  viewBox="0 0 100 120"> 
    <linearGradient 
        id="grad" 
        x1="0" x2="0" y1="0" y2="100%" 
        gradientUnits="objectBoundingBox"
    >
        <stop stop-color="cyan" offset="15%"/>
        <stop stop-color="blue" offset="40%"/>
        <stop stop-color="magenta" offset="65%"/>
        <stop stop-color="red" offset="80%"/>
    </linearGradient>
  
    <text   
        textLength="100" 
        lengthAdjust="spacingAndGlyphs"
        font-size="20"
        x="0" 
        y="20"
        fill="url(#grad)"
    >
        This line will shrink if "textLength" is set to a small enough value 
    </text> 
</svg>

</body>
</html>

在我<text>使用的标签textLength="100"中，视图框也设置为宽度 100: viewBox="0 0 100 120"，这就是为什么即使我在那里塞满了许多字符，所有东西都整齐地放在一行上。

但是，当我在 iPhone 上访问玩具网站时，一切都失败了，正如您在此屏幕截图中看到的那样。

截屏

Chrome、safari、firefox——没关系，它们都失败了，看起来都一样。曾经大约 80 个字符的文本，现在似乎被缩减为 13 个字符。奇怪的是，剪裁似乎发生在 SVG 视图框的中间，而可见字母似乎正在正确地压缩/压缩，就好像 textLength 属性正在做它的工作一样。

我做了一些相当广泛的测试，最后把另一个不太玩具的网站放在一起，比较了textLength和fill属性的各种组合，得出的结论是，唯一一次搞砸的时候是使用渐变填充和 textLength结合起来，由于浏览器特定的错误呈现而没有记录解释。

无论如何，我可以更改上面的代码以使我的玩具网站正确呈现，还是我必须求助于 JavaScript 并等待其他浏览器上场？

标签： htmlcsssvgcross-browsergradient

解决方案

推荐阅读