svg 文字_SVG文字简介

svg 文字

SVG text has some significant limitations compared to HTML content… but it also has some very real advantages in particular use-cases, and can sometimes be the only way to solve certain text layout challenges on web pages.

与HTML内容相比，SVG文本具有一些明显的局限性……但是在特定的用例中它也具有一些非常实际的优势，并且有时可能是解决网页上某些文本布局挑战的唯一方法。

SVG文本作为布局 (SVG Text as Layout)

SVG doesn’t think of text as HTML does: that is, as a string of glyphs to be wrapped and styled inside a container. Rather, it thinks of text as a graphical element to be laid out much like everything else: text should have at least a y coordinate value and a font-size to place and scale it in the viewBox area:

SVG不会像HTML那样考虑文本：也就是说，它是一串在容器内包装和样式化的字形字符串。 相反，它将文本视为要像其他所有内容一样布局的图形元素：文本应至少具有y坐标值和font-size以将其放置在viewBox区域中并缩放。

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="60" font-size="55" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        SEVEN NATION ARMY
    </text>
</svg>

font-size is assumed to be in pixels, relative to the viewBox