polygon 填充文本_如何创建（动画）文本填充

polygon 填充文本

View demo 查看演示 Download Source 下载源

I like to think that the future is already here. We have already so many exciting possibilities in CSS and SVG that some time ago we could only dream about. For example, we now have many possible ways to create text with an animated fill!

我想认为未来已经来临。在CSS和SVG中，我们已经拥有了许多令人兴奋的可能性，以至于不久前我们只能梦想着。例如，我们现在有许多可能的方法来创建带有动画填充的文本！

About a year ago the article Techniques for creating textured text by Sara Soueidan was published here on Codrops. This wonderful article will tell you all about the different methods for creating textured text with some modern web techniques including canvas.

大约一年前， Sara Soueidan撰写的文章“用于创建纹理文本的技术”发表在Codrops上。这篇精彩的文章将告诉您所有使用现代网络技术(包括画布)创建纹理文本的不同方法。

I’m very interested in this topic but from a different perspective. I have the following questions: Can the text fill be animated? Can we fill text with animated shadows or gradients? Or what about using videos for filling the text?

我对此主题非常感兴趣，但是从另一个角度来看。我有以下问题：文本填充可以动画吗？我们可以用动画阴影或渐变填充文本吗？还是使用视频来填充文字呢？

In this article I’m going to share my experiments and five ways to create patterned filled text. In three out of these five cases we will retain the ability to select the text. Of course we’d like to have that for every case but with some workarounds we can solve this problem, too.

在本文中，我将分享我的实验以及创建带图案的填充文本的五种方法。在这五种情况中的三种中，我们将保留选择文本的功能。当然，我们希望在每种情况下都能做到这一点，但是通过一些变通办法，我们也可以解决此问题。

For each of the techniques I’ll show the browser support, the ability to select text and, most importantly, the possibility to animate the fill (highly experimental).

对于每种技术，我将展示浏览器的支持，选择文本的能力以及最重要的是使填充动画化的可能性(高度实验性) 。

I will not include all the code here, only the most important parts, but you can find everything inside the download files and play with it.

我不会在这里包括所有代码，仅包括最重要的部分，但是您可以在下载文件中找到所有内容并进行操作。

Let’s begin.

让我们开始。

Attention: Some of these techniques are very experimental and won’t work in all browsers. Please see the browser support at the beginning of each section. 注意：这些技术中的一些是非常试验性的，并非在所有浏览器中都适用。请在每个部分的开头查看浏览器支持。 Internet Explorer has very little support. Internet Explorer几乎没有支持。

方法1：使用背景剪辑：文本 (Method 1: Using background-clip: text)

Browser Support: 浏览器支持：

ChromeSupported

支援Chrome
FirefoxNot supported

Firefox不支持
Internet ExplorerNot supported

Internet Explorer不支援
SafariSupported

Safari支持
OperaSupported

歌剧支持

Certainly, this is the most obvious way which comes to one’s mind, although background-clip: text is only supported in Webkit-based browsers for now and only with the prefix -webkit-.

当然，这是想到的最明显的方法，尽管background-clip: text目前仅在基于Webkit的浏览器中受支持，并且仅带有前缀-webkit- 。

Attention: demos from this section will only work in Chrome, Opera and Safari.

注意：本节中的演示仅适用于Chrome，Opera和Safari。

The markup looks as follows:

标记如下所示：


<div class="box-with-text">
Text
</div>

And the CSS looks like this:

CSS看起来像这样：


.box-with-text {
background-image: url(IMAGE URL);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

**Demo 1: 演示1： `background-clip: textbackground-clip: text`**

Click on the image to open the live demo.

单击该图像以打开实时演示。

Text remains text, so we can select and copy it. The drawback is the lack of browser support. In Firefox or IE this demo will look like the following:

文本仍然是文本，因此我们可以选择并复制它。缺点是缺乏浏览器支持。在Firefox或IE中，此演示将如下所示：

But we can use CSS gradients with the -webkit- prefix in order to remove the background in non-Webkit browsers:

但是我们可以使用带有-webkit-前缀CSS渐变，以便在非Webkit浏览器中删除背景：


.box-with-text {
background-image: -webkit-linear-gradient(transparent, transparent),
url(IMAGE URL);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

Non-supporting browsers will simply ignore the entire string and we can avoid showing the background image altogether.

不支持的浏览器将只忽略整个字符串，我们可以避免完全显示背景图像。

This simple trick with a gradient will allow us to fix the view in non-Webkit browsers if we don’t want to show an image but I believe that a workaround like this makes this method not a good choice for textured text yet.

如果不希望显示图像，则这种带有渐变的简单技巧将使我们能够在非Webkit浏览器中修复视图，但是我相信类似的解决方法使该方法仍不是纹理文本的理想选择。

If we want to animate the fill for example, CSS backgrounds don’t give us many possibilities. We can only animate the background position and size, but we can’t smoothly change colors.

例如，如果我们想为填充动画，则CSS背景不会给我们带来很多可能性。我们只能设置背景位置和大小的动画，但不能平滑地更改颜色。

Check out a live demo:

查看现场演示：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

结论(Conclusion)

Selectable text 可选文字: Yes; 是
Animatable fill 可动画填充: Yes, but with restrictions; 是的，但有限制
Browsers support 浏览器支持: Webkit only; 仅Webkit

The technique using background-clip: text is not cross-browser and it only has limited possibilities for animating the fill.

使用background-clip: text的技术background-clip: text不是跨浏览器的，并且只有动画填充的可能性有限。

方法2：SVG文本 (Method 2: SVG text)

Browser Support: 浏览器支持：

ChromeSupported

支援Chrome
FirefoxSupported

Firefox支持
Internet ExplorerSupported

Internet Explorer支持
SafariSupported

Safari支持
OperaSupported

歌剧支持

SVG is a wonderful format which has good browser support. With SVG we have three ways to make patterned text:

SVG是一种出色的格式，具有良好的浏览器支持。使用SVG，我们可以通过三种方式来制作带图案的文本：

fill

fill
mask

mask
clip-path

clip-path

I’ll cover all three techniques here, so let’s begin with using fill.

我将在这里介绍这三种技术，因此让我们从使用fill开始。

If you are not familiar with SVG, I recommend reading the SVG specification, the articles by Sara Soueidan or the SVG tutorials on WebPlatform.org.

如果您不熟悉SVG，建议阅读SVG规范，Sara Soueidan的文章或WebPlatform.org上的SVG教程。

This is how we can use text in an SVG:

这就是我们可以在SVG中使用文本的方式：


<svg viewBox="0 0 600 300">
<text text-anchor="middle"
x="50%"
y="50%"
dy=".35em"
class="text"
>
Text
</text>
</svg>

And it’s regular text, we can select and copy it. Have a look at the result:

它是常规文本，我们可以选择并复制它。看一下结果：

Text in SVG has the same properties as any other shape. It can have a fill and a stroke, and many other properties, such as being solid, have gradients or patterns.

SVG中的文本具有与其他任何形状相同的属性。它可以具有填充和笔触，并且许多其他属性(例如，实体)具有渐变或图案。

The markup for a simple gradient:

简单渐变的标记：


<linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="100%">
<stop stop-color="hsl(50, 100%, 70%)" offset="10%"/>
<stop stop-color="hsl(320, 100%, 50%)" offset="90%"/>
</linearGradient>

For learning more about creating gradients you can read the article Getting Started with SVG Gradients by Joni Trythall.

要了解有关创建渐变的更多信息，请阅读Joni Trythall的文章SVG渐变入门。

The fill of an element can be added with the attribute fill. When using gradients or patterns the ID must be defined inside the url():

元素的填充可以与属性fill一起添加。使用渐变或图案时，必须在url()内定义ID：


<svg viewBox="0 0 600 300">
<text text-anchor="middle"
x="50%"
y="50%"
dy=".35em"
class="text"
fill="url(#gr-simple)">
Text
</text>
</svg>

Another approach is to define the fill in CSS:

另一种方法是在CSS中定义填充：


.text {
fill: url(#gr-simple);
}

We can set the gradient colors in CSS, but we need to use SMIL to gain control over other properties of the gradient:

我们可以在CSS中设置渐变颜色，但是我们需要使用SMIL来控制渐变的其他属性：


<!-- Gradient -->
<radialGradient id="gr-radial"
cx="50%" cy="50%" r="70%"><!-- Animation for radius of gradient -->
<animate attributeName="r"
values="0%;150%;100%;0%"
dur="5s" repeatCount="indefinite" /><!-- Animation for colors of stop-color -->
<stop stop-color="#FFF" offset="0">
<animate attributeName="stop-color"
values="#333;#FFF;#FFF;#333"
dur="5s" repeatCount="indefinite" />
</stop>
<stop stop-color="rgba(55,55,55,0)" offset="100%"/>
</radialGradient>

Take a look at the live demo:

看一下现场演示：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

For more on using SMIL read the article A Guide to SVG Animations (SMIL) by Sara Soueidan.

有关使用SMIL的更多信息，请阅读Sara Soueidan的文章SVG动画指南(SMIL) 。

Now let’s have a look at patterns. Patterns in SVG can contain all types of SVG shapes and images. Patterns can be either simple or quite complex. SVG patterns can be resized without losing their sharpness.

现在让我们看一下模式。 SVG中的图案可以包含所有类型的SVG形状和图像。模式可以很简单，也可以很复杂。可以调整SVG模式的大小而不会损失其清晰度。

And the markup for the circles pattern looks as follows:

圆圈图案的标记如下所示：


<pattern
id="p-spots"
viewBox="0 0 80 80"
patternUnits="userSpaceOnUse"
width="60" height="60"
x="5" y="5"
>
<g class="g-spots">
<circle r="5" cx="10" cy="10"/>
<circle r="7" cx="30" cy="30"/>
<circle r="5" cx="50" cy="10"/>
<circle r="9" cx="70" cy="30"/><circle r="11" cx="50" cy="50"/>
<circle r="5" cx="10" cy="50"/>
<circle r="7" cx="30" cy="70"/>
<circle r="9" cx="70" cy="70"/>
</g>
</pattern>

Only the position and size of the circles is defined, their colors are defined in CSS, or actually Sass, because it allows us to use iteration:

仅定义圆的位置和大小，在CSS或实际上是Sass中定义其颜色，因为它允许我们使用迭代：


$colors: #1D4259, #0A7373, #30BF7C, #BAF266, #EEF272;
$max: length($colors);.g-spots circle {@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}){
fill: nth($colors, $item);
}
}
}

This results into the following CSS:

结果是以下CSS：


.g-spots circle:nth-child(5n + 1) {
fill: #1D4259;
}.g-spots circle:nth-child(5n + 2) {
fill: #0A7373;
}.g-spots circle:nth-child(5n + 3) {
fill: #30BF7C;
}.g-spots circle:nth-child(5n + 4) {
fill: #BAF266;
}.g-spots circle:nth-child(5n + 5) {
fill: #EEF272;
}

For more on SVG patterns you can read the Patterns article in the SVG Tutorial section on MDN.

有关SVG模式的更多信息，您可以阅读MDN上SVG教程部分中的模式文章。

When using patterns there are less options for animating the element than with ordinary SVG shapes. For example, transformations on shapes in patterns don’t work in Firefox. But we can animate the stroke in order to get something similar to scaling.

使用图案时，与普通的SVG形状相比，为元素设置动画的选项更少。例如，样式中形状的转换在Firefox中不起作用。但是我们可以对笔划进行动画处理，以获得类似于缩放的效果。

For this demo I use Sass too, but in this case I don’t only set the colors but also the animation-delay. This will animate the stars sequentially:

在这个演示中，我也使用Sass，但是在这种情况下，我不仅设置了颜色，还设置了animation-delay 。这将依次为星星设置动画：


$colors: #551F7A, #BA2799, #D9587A, #FFDD00, #FFF3A1;
$max: length($colors);$time: 2s;
$time-step: $time/$max;.g-stars polygon {
stroke-width: 0;
animation: stroke $time infinite;@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}){
$color: nth($colors, $item);
fill: $color;
stroke: $color;
animation-delay: -($time-step*$item);
}
}
}/* Change stroke-width within animation */@keyframes stroke {
50% {
stroke-width: 10;
}
}

This results into the following CSS:

结果是以下CSS：


.g-stars polygon {
stroke-width: 0;
animation: stroke 2s infinite;
}.g-stars polygon:nth-child(5n + 1) {
fill: #551F7A;
stroke: #551F7A;
animation-delay: -0.4s;
}.g-stars polygon:nth-child(5n + 2) {
fill: #BA2799;
stroke: #BA2799;
animation-delay: -0.8s;
}.g-stars polygon:nth-child(5n + 3) {
fill: #D9587A;
stroke: #D9587A;
animation-delay: -1.2s;
}.g-stars polygon:nth-child(5n + 4) {
fill: #FFDD00;
stroke: #FFDD00;
animation-delay: -1.6s;
}.g-stars polygon:nth-child(5n + 5) {
fill: #FFF3A1;
stroke: #FFF3A1;
animation-delay: -2s;
}/* Change stroke-width within animation */
@keyframes stroke {
50% {
stroke-width: 10;
}
}

If you look at the code of this demo, you’ll find that there are more shapes than expected. When we enlarge strokes, some of the shapes may be cut off by the bounds of the pattern. By using duplicated shapes we can solve this problem.

如果查看此演示的代码，您会发现形状超出了预期。当我们放大笔触时，某些形状可能会被图案的边界截断。通过使用重复的形状，我们可以解决此问题。

Have a look at the live demo:

看一下现场演示：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

As a fill we can also use animated GIFs. Usually, they are quite heavy, but they can be used for creating really nice effects:

作为填充，我们还可以使用动画GIF。通常，它们很重，但是可以用于创建非常好的效果：

For creating a fill with an image we use a pattern. The markup of the pattern with an image is the following:

为了使用图像创建填充，我们使用了图案。该图案与图像的标记如下：


<pattern
id="p-fire"
viewBox="30 100 186 200"
patternUnits="userSpaceOnUse"
width="216" height="200"
x="-70" y="35"
>
<image
xlink:href="http://yoksel.github.io/about-svg/assets/img/parts/fire.gif"
width="256" height="300"/>
</pattern>

Unlike background-clip: text this text will be correctly displayed in most modern browsers.

与background-clip: text不同， background-clip: text本将在大多数现代浏览器中正确显示。

Have a look at the live demo:

看一下现场演示：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

Let’s talk about using a stroke. For HTML text we can create a cross-browser stroke using text-shadow but this type of stroke has pretty limited options:

让我们谈谈使用笔触。对于HTML文本，我们可以使用text-shadow创建跨浏览器的笔划，但是这种笔划的选择非常有限：

Writing the CSS for this kind of stroke by hand can be very tedious, so I use a tiny function in Sass to do that. We can set the color and width as parameters. Despite of this convenient function, the resulting code will be quite big and cumbersome.

用手为这种笔触编写CSS可能非常繁琐，因此我在Sass中使用了一个小函数来实现这一目的。我们可以将颜色和宽度设置为参数。尽管具有此方便的功能，但生成的代码将非常庞大且繁琐。

Unlike in HTML, strokes are available for all elements in SVG, including text. And besides being solid they can also be filled with gradients and patterns.

与HTML不同，笔画可用于SVG中的所有元素，包括文本。除了坚固之外，还可以填充渐变和图案。

Check out the live demo:

查看现场演示：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

We can also have a dashed stroke and animate it in different ways:

我们还可以使用虚线描边并以不同方式对其进行动画处理：

For this type of stroke we need to duplicate the text as many times as colors are used. A better way to make this, is to use the symbol:

对于这种笔画，我们需要将文本重复使用多次的颜色。一个更好的方法是使用symbol ：


<svg viewBox="0 0 600 300"><!-- Symbol -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%" y="50%" dy=".35em">
Text
</text>
</symbol><!-- Duplicate symbols -->
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use>
<use xlink:href="#s-text" class="text"
></use></svg>

And this is how we can control the colors and the animation:

这就是我们可以控制颜色和动画的方式：


$colors: #F2385A, #F5A503, #E9F1DF, #56D9CD, #3AA1BF;
$max: length($colors);
$dash: 70;
$dash-gap: 10;
$dash-space: $dash * ($max - 1) + $dash-gap * $max;
$time: 6s;
$time-step: $time/$max;.text {
fill: none;
stroke-width: 6;
stroke-linejoin: round;
stroke-dasharray: $dash $dash-space;
stroke-dashoffset: 0;
animation: stroke $time infinite linear;@for $item from 1 through $max {
&:nth-child(#{$max}n + #{$item}){
$color: nth($colors, $item);
stroke: $color;
animation-delay: -($time-step * $item);
}
}
}@keyframes stroke {
100% {
stroke-dashoffset: -($dash + $dash-gap) * $max;
}
}

And this results into the following CSS:

这将导致以下CSS：


.text {
fill: none;
stroke-width: 6;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
animation: stroke 6s infinite linear;
}.text:nth-child(5n + 1) {
stroke: #F2385A;
animation-delay: -1.2s;
}.text:nth-child(5n + 2) {
stroke: #F5A503;
animation-delay: -2.4s;
}.text:nth-child(5n + 3) {
stroke: #E9F1DF;
animation-delay: -3.6s;
}.text:nth-child(5n + 4) {
stroke: #56D9CD;
animation-delay: -4.8s;
}.text:nth-child(5n + 5) {
stroke: #3AA1BF;
animation-delay: -6s;
}@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}

For each symbol we set an individual animation delay, so the parts of the stroke don’t accumulate in one place but spread through the contour of a letter.

对于每个符号，我们都设置了一个单独的动画延迟，因此笔画的各个部分不会在一个位置上累积，而是通过字母的轮廓传播。

Have a look at the live demo:

看一下现场演示：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

结论(Conclusion)

With this method the text can be styled using CSS. We can also select and copy the text. Another great advantage is that SVG has really good browser support. So for creating these kind of fills, SVG is one of the best candidates.

使用此方法，可以使用CSS设置文本样式。我们还可以选择并复制文本。另一个巨大的优势是SVG具有非常好的浏览器支持。因此，对于创建此类填充，SVG是最佳候选人之一。

A disadvantage of using SVG is the restriction on the ability to manage the text. For example, the words in the text don’t break when the text meets the document boundaries. We can use some tricks to get line breaks, but in this case the text might simply break in the middle of a word. So this method is more appropriate for short texts and logos.

使用SVG的一个缺点是对文本管理能力的限制。例如，当文本达到文档边界时，文本中的单词不会中断。我们可以使用一些技巧来获得换行符，但是在这种情况下，文本可能只是在单词中间中断。因此，此方法更适合于短文本和徽标。

Selectable text 可选文字: Yes; 是
Animatable fill 可动画填充: Yes, both fill and stroke can be animated, with some restrictions related to SVG animations.; 是的，可以对填充和笔触进行动画处理，但对SVG动画有一些限制。
Browsers support 浏览器支持: All modern browsers; 所有现代浏览器

方法3：SVG掩码和SVG剪切路径(Method 3: SVG mask and SVG clippath)

Browser Support: 浏览器支持：

ChromeSupported

支援Chrome
FirefoxSupported

Firefox支持
Internet ExplorerSupported

Internet Explorer支持
SafariSupported

Safari支持
OperaSupported

歌剧支持

There are two types of masks in SVG. We also have masks in CSS that can be applied to HTML elements, but browser support is not good enough, so let’s dive into SVG masks.

SVG中有两种类型的蒙版。 CSS中也有可以应用于HTML元素的掩码，但是浏览器支持还不够好，因此让我们深入了解SVG掩码。

SVG masks can be applied to HTML elements too, but for now this feature only works in Firefox. SVG masks for SVG elements work fine in all modern browsers. And both clippath and mask can contain text.

SVG掩码也可以应用于HTML元素，但是目前此功能仅在Firefox中有效。用于SVG元素的SVG掩码在所有现代浏览器中都可以正常工作。 clippath和mask都可以包含文本。

What is the difference between mask and clippath?

mask和clippath什么clippath ？

clippath simply cuts the object to its path boundaries. It’s like a scissor cut. mask takes transparency and brightness of the mask into account which allows for a kind of filtering of the object.

clippath只是将对象剪切到其路径边界。就像剪刀剪一样。 mask考虑了mask的透明度和亮度，从而可以对对象进行某种过滤。

**Demo 13:演示13 ：** `clippath` `clippath` SVG文本

The markup for the clippath example:

clippath示例的标记：


<clippath id="cp-text">
<text text-anchor="middle"
x="50%" y="50%" dy=".35em"
class="text--line">
Text
</text>
</clippath>

The markup for the group of shapes to which we will apply the clip path:

我们将应用剪切路径的一组形状的标记：


<g clip-path="url(#cp-text)">
<circle r="70%"
cx="300"
cy="150"
class="c-fill--color"/>
<circle r="70%"
cx="300"
cy="150"
class="c-fill"/>
</g>

Depending on what you’d like to do, the circles can of course be replaced with any other shape. In this demo I use two circle elements where the second one is filled with a pattern, and the first one (visually behind the second one) is filled with a solid color. This is needed to hide the thin lines between pattern tiles in the second one. In simple cases only one shape can be used.

当然，根据您的意愿，可以将圆圈替换为任何其他形状。在此演示中，我使用两个circle元素，其中第二个元素填充有图案，第一个元素(在视觉上位于第二个元素的后面)填充有纯色。这是隐藏第二个图案图块之间的细线所必需的。在简单的情况下，只能使用一种形状。

Masks can contains symbols, which is very convenient for text with rich effects, when we need several copies of the text.

蒙版可以包含符号，当我们需要文本的多个副本时，这对于具有丰富效果的文本非常方便。


<symbol id="s-text">
<text text-anchor="middle"
x="50%"
y="50%"
dy=".35em"
class="text"
>
Text
</text>
</symbol><!--Mask-->
<mask id="m-text"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<use xlink:href="#s-text"
class="text-mask"
></use>
</mask>

The markup for the group will be the same but the mask is applied by using the attribute mask:

该组的标记将相同，但是使用属性mask来应用mask ：


<g mask="url(#m-text)">
...
</g>

In both mask and clippath, the text can be styled, i.e. we can change the font family and font size. But the text can’t be selected.

在mask和clippath ，都可以设置文本样式，即可以更改字体系列和字体大小。但是无法选择文本。

This problem can be solved by duplicating the text from the mask/clippath, place it above the masked element and remove its fill by setting fill: transparent. Like that we’ll get a transparent text which can be selected and copied.

通过复制来自mask / clippath的文本，将其放置在masked元素上方，并通过设置fill: transparent删除其填充，可以解决此问题。这样，我们将获得可以选择和复制的透明文本。

To duplicate the text it’s best to use symbol. But symbol doesn’t work inside a clippath, but if you use mask, you can use one symbol for the mask and one for the transparent text.

要复制文本，最好使用symbol 。但是symbol在clippath ，但是如果使用mask ，则可以将一个符号用于mask ，将一个符号用于透明文本。

The copy of the symbol must be placed in the code below the element with mask or clip-path.

必须将符号的副本放置在带有mask或clip-path的元素下方的代码中。

Try to select and copy the text in the following live demo:

尝试选择并复制以下实时演示中的文本：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

It’s important to know that fill: none doesn’t work, but fill: transparent does. Also, a shape with a stroke but without a fill can be used to achieve the same effect. The text will then be selectable, too.

重要的是要知道fill: none起作用，但是fill: transparent起作用。同样，具有笔触但没有填充的形状也可以用来实现相同的效果。文本也将是可选的。

The great advantage of this technique is the variety of possibilities to animate the fill. You can use any combination of SVG elements and animate them in many different ways. In this case it’s possible to use transformations, animate the fill and the stroke.

该技术的最大优点是可以对填充进行动画处理。您可以使用SVG元素的任意组合，并以许多不同的方式对其进行动画处理。在这种情况下，可以使用转换，为填充和笔触设置动画。

Here we have some animated content in a group with clip-path and animated strokes in the pattern:

在这里，我们在一个组中包含一些动画内容，其中在模式中包含clip-path和动画笔触：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

The next live demo shows a group of animated shapes clipped with clip-path:

下一个现场演示显示了一组用clip-path的动画形状：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

There are more crazy ways to fill text. It’s possible to use HTML in SVG by using the foreignObject element, so it’s possible to apply a SVG mask/clippath to HTML elements with CSS effects and animations, even to video. This technique has some limitations, though. For example, playing videos ignore the mask in Chrome. So we can’t use this for now although it’s quite exciting. But we can do the same using other approaches.

还有更多疯狂的方式来填充文本。通过使用foreignObject元素，可以在SVG中使用HTML，因此可以将SVG蒙版/剪切路径应用于具有CSS效果和动画HTML元素，甚至应用于视频。但是，此技术有一些限制。例如，播放视频时会忽略Chrome中的遮罩。因此，尽管它非常令人兴奋，但我们暂时无法使用它。但是我们可以使用其他方法来做同样的事情。

结论 (Conclusion)

Selectable text 可选文字: No, but we can make it accessible with a workaround; 否，但是我们可以通过变通办法使它可访问
Animatable fill 可动画填充: Yes, it’s possible to animate both stroke and fill; 是的，可以同时对笔触和填充进行动画处理
Browsers support 浏览器支持: All modern browsers.; 所有现代浏览器。

In comparison to SVG text, this technique has more animation possibilities.

与SVG文本相比，此技术具有更多的动画可能性。

方法4：混合混合模式 (Method 4: Mix blend mode)

Browser Support: 浏览器支持：

ChromeExperimental flag

Chrome实验性标志
FirefoxSupported

Firefox支持
Internet ExplorerNot supported

Internet Explorer不支援
SafariSupported

Safari支持
OperaExperimental flag

歌剧实验标志

Attention: in order to view the demos in this section, you’ll need to use Firefox or Safari, or in Chrome with the activated flag under 注意：要查看本节中的演示，您需要使用Firefox或Safari，或在Chrome中使用 chrome://flags/#enable-experimental-web-platform-features (relaunch required). To view the demos in Opera activate the flag chrome://flags/#enable-experimental-web-platform-features下的激活标志(需要重新启动) 。要在Opera中查看演示，请激活标志 opera://flags/#enable-experimental-web-platform-features and relaunch browser, too. opera://flags/#enable-experimental-web-platform-features并重新启动浏览器。

This method for making patterned text is very experimental and will not work in all browsers, but it is really interesting, because we are able to use anything we want as a fill for the text. Currently, browser support is not very good.

这种制作带图案的文本的方法是非常实验性的，并非在所有浏览器中都可以使用，但这确实很有趣，因为我们能够使用所需的任何东西来填充文本。当前，浏览器支持不是很好。

If you’re not familiar with blend modes, I recommend reading this article: Getting to Know CSS Blend Modes.

如果您不熟悉混合模式，建议阅读这篇文章： CSS混合模式入门。

How it works: different blend modes work differently on the colors of the layer they are applied to. For example, the mode lighten will show only light areas of the content, dark areas will disappear. On the other hand, the mode darken will select dark areas, and light areas will disappear. This allows us to create a HTML layer with transparent areas of a complex shape, even in the shape of regular text which can be changed on the fly!

运作方式：不同的混合模式在所应用图层的颜色上的运作方式不同。例如， lighten模式将仅显示内容的亮区域，而暗区域将消失。另一方面， darken模式将选择暗区，而亮区将消失。这使我们能够创建一个HTML层，该层具有复杂形状的透明区域，即使是可以随时更改的常规文本形状也是如此！

**Demo 18演示18** `mix-blend-mode` `mix-blend-mode`文本

The following is a simplified version of the markup:

以下是标记的简化版本：


<div class="box-with-text">
<div class="text">Text</div>
</div>

And this is the CSS:

这是CSS：


.box-with-text {
background: url(IMAGE URL)
50% 70% / cover;
}
.text {
background: black;
color: white;
mix-blend-mode: darken;
}

All the magic is contained in the line mix-blend-mode: darken. With this blend mode all white areas will become fully transparent and we can see the background of the parent.

所有的魔力都包含在mix-blend-mode: darken 。通过这种混合模式，所有白色区域将变得完全透明，我们可以看到父级的背景。

The disadvantage of this technique is that we can’t cut off areas around the text. This way doesn’t allow us to put patterned text over another layer with a graphical fill (as it can be done using SVG masks). In fact, it will be just a holey layer through which we can see the underlying elements of the page. But under this layer we can place anything we can imagine, for example, animated CSS effects or even a video!

这种技术的缺点是我们不能切除文本周围的区域。这种方式不允许我们用图形填充将图案化的文本放在另一层上(因为可以使用SVG蒙版完成此操作)。实际上，这只是一个有洞的层，通过它我们可以看到页面的基础元素。但是在这一层下，我们可以放置我们可以想象的任何东西，例如动画CSS效果甚至是视频！

**Demo 19** shows what can be done with animation and `box-shadow:`

There is a problem with thin lines appearing around the block of text, especially in Firefox. This can be fixed with a pseudo element which has a border in the color of the background. This will cover the thin lines:

文本块周围出现细线存在问题，尤其是在Firefox中。可以使用伪元素来修复此问题，该伪元素的背景颜色带有边框。这将覆盖细线：


.box-with-text {
background: url(IMAGE URL) 50% 70%/cover;
/* Hack to hide thin transparent lines while resizing objects */
}.box-with-text:after {
content: '';
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
display: block;
border: 4px solid black;
}.text {
background: black;
color: white;
mix-blend-mode: darken;
}

The main disadvantage of this method is the lack of browser support, so for now this technique is more suitable for experiments rather than using it in real website projects.

这种方法的主要缺点是缺乏浏览器支持，因此目前该技术更适合用于实验，而不是在实际的网站项目中使用。

结论 (Conclusion)

Selectable text 可选文字: Yes; 是
Animatable fill 可动画填充: Yes, and as fill any HTML content including video can be used; 是的，作为填充，可以使用任何HTML内容(包括视频)
Browsers support 浏览器支持: In Safari and Firefox blend modes are fully supported, in Chrome and Opera they are behind an experimental flag, IE doesn’t support them at all; 完全支持Safari和Firefox的混合模式，而在Chrome和Opera中，它们处于试验性标记的后面，IE根本不支持它们

方法5：SVG掩码和HTML(Method 5: SVG mask and HTML)

Browser Support: 浏览器支持：

ChromeSupported

支援Chrome
FirefoxSupported

Firefox支持
Internet ExplorerSupported

Internet Explorer支持
SafariSupported

Safari支持
OperaSupported

歌剧支持

This last technique is a little peculiar, too. It’s quite similar to the previous one, but it has better browser support, because yes — it’s SVG again!

最后一种技术也有些特殊。它与上一个非常相似，但是它具有更好的浏览器支持，因为是的-还是SVG！

I call this method the “reverse mask”. In its essence it consists in using a SVG mask to get a layer with a solid fill and a transparent area in the shape of text, so that, in the next step, this layer can be put over an HTML element with any content.

我将此方法称为“反向掩码”。从本质上讲，它包括使用SVG蒙版获得具有纯色填充和文本形状的透明区域的层，以便在下一步中可以将该层放置在具有任何内容HTML元素上。

We won’t cut the extra bits of the layer with content (as we do when using mask or clippath). On the contrary, we’ll make holes of the needed shapes in the layer with the solid fill, similar to a stencil. And this is how it looks:

我们不会用内容削减图层的多余部分(就像使用mask或clippath时clippath )。相反，我们将使用实体填充在图层上打出所需形状的Kong，类似于模板。这是它的外观：

For this case, the SVG is divided into two parts. The first invisible part contains a symbol with the text and the mask:

对于这种情况，SVG分为两个部分。第一个不可见部分包含带有文本和掩码的符号：


<svg viewBox="0 0 600 300" class="svg-defs">
<!-- Symbol with text -->
<symbol id="s-text">
<text text-anchor="middle"
x="50%" y="50%" dy=".35em"
class="text">
Text
</text>
</symbol><!-- Mask with text -->
<mask id="m-text"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse"><rect
width="100%"
height="100%"
class="mask__shape"/>
<use xlink:href="#s-text"
class="mask__text"/></mask>
</svg>

In simple cases you don’t have to add the symbol, but it helps make the code of the mask more readable. In more complex cases it will help you make some interesting effects.

在简单的情况下，您不必添加符号，但这有助于使掩码的代码更具可读性。在更复杂的情况下，它将帮助您产生一些有趣的效果。

In this case we need the mask inverted, that’s why it’s needed to set the white color for the shape which is filling the mask:

在这种情况下，我们需要将蒙版反转，这就是为什么需要为填充蒙版的形状设置白色的原因：


.mask__shape {
fill: white;
}

The color of text must be black because the transparent area in the mask must be in the shape of the text.

文本的颜色必须为黑色，因为遮罩中的透明区域必须为文本形状。

Also, we’ll need a more complex HTML structure:

另外，我们将需要更复杂HTML结构：


<div class="box-with-text">
<!-- Content for text -->
<div class="text-fill"></div><!-- SVG to cover text fill -->
<svg viewBox="0 0 600 300"
class="svg-inverted-mask">
<!-- Big shape with hole in form of text -->
<rect
width="100%" height="100%"
mask="url(#m-text)"
class="shape--fill"/>
<!-- Transparent copy of text to keep patterned text selectable -->
<use xlink:href="#s-text"
class="text--transparent"/>
</svg>
</div>

The lowermost layer contains the HTML element, to which we can apply a background or it can be filled with some HTML content. In simple cases the background can be applied to the parent container, but for more flexibility it’s better to use a separate element.

最底层包含HTML元素，我们可以在其上应用背景，也可以用一些HTML内容填充它。在简单的情况下，可以将背景应用于父容器，但是为了获得更大的灵活性，最好使用单独的元素。

The next layer is the SVG which contains the shape with the fill and the mask. It’s a visible layer with a transparent area in the shape of the text. Above this layer we place a symbol with the text; this is needed to keep the text accessible.

下一层是SVG，其中包含带有填充和蒙版的形状。这是一个可见层，在文本形状中具有透明区域。在这一层之上，我们在文本上放置了一个符号。这是保持文本可访问性所必需的。

The disadvantage of this technique is that the layer with the content is not cut off by the mask. The underlying layers can be seen through the transparent area of the topmost layer. We can’t cut off the text from the background and place it over other layers.

该技术的缺点是具有内容的层不能被掩模切断。通过最顶层的透明区域可以看到底层。我们无法从背景中截取文字并将其放置在其他图层上。

But this technique has some advantages, too. The first advantage is that HTML is placed outside the SVG and may contain anything we want: any animations and media content.

但是这种技术也有一些优点。第一个优点是HTML放置在SVG之外，并且可以包含我们想要的任何内容：任何动画和媒体内容。

If you want to animate the fill of the text then that’s easy, too. But note that the performance is not the best in the following demo:

如果您想为文本填充动画，那么这也很容易。但是请注意，以下演示中的性能并不是最好的：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

Would you like to fill the text with a video? No problem:

您想用视频填充文字吗？ 没问题：

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

In these demos the managing of sizes might look a bit complicated. If you don’t want to resize the block with text, you won’t need that part of the code.

在这些演示中，尺寸的管理可能看起来有些复杂。 如果您不想用文本来调整块的大小，则不需要该部分代码。

The second advantage, and very different from using mix-blend-mode, is that the fill of the layer with the mask doesn’t mix with underlying layers, so it can contain fills with gradients and patterns.

第二个优点与使用mix-blend-mode不同之处在于，使用遮罩填充的层不会与基础层混合，因此可以包含带有渐变和图案的填充。

View this demo on the Codrops Playground 在Codrops Playground上观看此演示

结论(Conclusion)

Selectable text 可选文字: No, but we can make it accessible; 否，但是我们可以使其变得可访问
Animatable fill 可动画填充: Yes, any HTML content including video can be used as fill; 是的，任何HTML内容(包括视频)都可以用作填充
Browsers support 浏览器支持: All modern browsers; 所有现代浏览器

最后的话(Final words)

Now you know several techniques to create text with patterned fills, including animated ones. Even if we can’t use some of listed techniques right now, I’m sure that we will be able to use them in the future. And now, I think it’s time for you to start creating some impressive text effects for your next project