使用SVG创建自适应英雄文字

While responsive text can be built using vw units, the current lack of max and min font-size properties in CSS means that any attempt to do so must be accompanied by a set of media queries to control display of the text at widescreen and mobile viewport widths. This forces vw text to settle somewhat uncomfortably between two extremes, clamped with @media queries.

尽管可以使用vw单位构建响应文本 ，但是CSS当前缺少max和min font-size属性，这意味着任何尝试都必须伴随一组媒体查询，以控制宽屏和移动视口下文本的显示宽度。 这迫使vw文本在两个极端之间(由@media查询限制)有些不适。

While SVG has many limitations when it comes to text, it is perfect for “hero” banner elements. There are several ways to create these on web pages:

尽管SVG在文本方面有很多限制，但它非常适合“英雄”横幅元素。 有几种方法可以在网页上创建它们：

内嵌SVG文字 (Inline SVG Text)

The best method for adding a title to a page in SVG is to make the SVG part of the page itself:

在SVG中向页面添加标题的最佳方法是使SVG成为页面本身的一部分：

<header>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Kauai</text>
    </svg>
</header>

The CSS:

CSS：

header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 90px;
   fill: blue;
}

The SVG should automatically scale itself to its container: you’ll likely need to adjust the viewBox, font-size and x values to have your text positioned across the SVG correctly. (Temporarily placing a border or background-color on the SVG can help in determining the rendered size of the element).

SVG应该自动将其自身缩放到其容器：您可能需要调整viewBox ， font-size和x值，以使文本正确地跨SVG定位。 (暂时在SVG上放置border或background-color可以帮助确定元素的渲染大小)。

Note that font-size for the SVG is relative to the viewBox, meaning that it scales on resize. Also note that the color of the <text> element is set using fill, not color.

请注意，SVG的font-size是相对于viewBox的 ，这意味着它会在调整大小时缩放。 另请注意， <text>元素的颜色是使用fill 而不是 color 。

Due to the fact that it’s inline, this approach has several advantages:

由于它是内联的，因此这种方法具有以下优点：

1. The SVG can use any font embedded on the page, or from the site stylesheet.

   SVG可以使用页面上或网站样式表中嵌入的任何字体 。

2. The text is immediately searchable, editable, copyable and accessible: it registers and is read on the page just like any other text.

   该文本可立即搜索 ，编辑，复制和访问 ：它像其他任何文本一样注册并在页面上阅读。

You can take things much further in terms of visual effects, while keeping the text editable, as shown in the example at the top of this article.

您可以在视觉效果方面做得更好，同时使文本可编辑，如本文顶部的示例所示。

SVG文本作为链接图像 (SVG Text as linked image)

You can keep also the same SVG code in its own file, and reference it as an image from an HTML document:

您还可以在自己的文件中保留相同的SVG代码，并将其作为HTML文档中的图像引用：

<header>
    <img src="waves.svg" alt="Waves"> 
</header>

Making the image fluid would make the element responsive. There are a few considerations, however:

使图像流畅将使元素响应。 但是，有一些注意事项：

1. The linked SVG can’t reliably use an embedded font.
   链接的SVG无法可靠地使用嵌入字体。
2. The text used is searchable, but only in the context of the SVG itself; it is not copyable from the web page.
   所使用的文本是可搜索的，但只能在SVG本身的上下文中进行； 无法从网页复制。

3. The text is not accessible, although the alt attribute compensates for this.

   尽管alt属性对此进行了补偿，但该文本不可访问。

分解的SVG文字 (Broken-Up SVG Text)

There may be situations in which the SVG text can’t be retained as text, and must instead be broken apart (in Adobe Illustrator: Type / Create Outlines) and exported as SVG paths. A good example:

在某些情况下，SVG文本不能保留为text ，而必须分开(在Adobe Illustrator中： Type / Create Outlines )并导出为SVG路径。 一个很好的例子：

This removes any need for embedded fonts, but also eliminates the possibility of easily editing the SVG. It also removes SEO and accessibility, unless the following steps are taken:

这消除了对嵌入字体的任何需要，而且消除了轻松编辑SVG的可能性。 除非采取以下步骤，否则它还会删除SEO和可访问性：

1. If the SVG is referenced as an image, adding an alt attribute to the tag.

   如果将SVG引用为图像，请向标签添加alt属性。

2. If using the SVG inline, adding a <title> element.

   如果使用SVG内联，请添加<title>元素 。

Note that the text example at the top of this article uses SVG filters, which means that it will not appear in current versions of Safari. I'll have more to say about this in a future article.

请注意，本文顶部的文本示例使用SVG过滤器，这意味着它不会出现在当前版本的Safari中。 在以后的文章中，我将对此进行更多说明。

翻译自: https://thenewcode.com/363/Creating-Responsive-Hero-Text-with-SVG