svg 灰色线填充图案_在网页背景中使用SVG：对角线和图案

svg 灰色线填充图案

The usual approach to making diagonal designs in web page backgrounds is either to use a little trigonometry to create patterns that repeat and tile seamlessly in a square, or to use a repeating CSS linear gradient. Both have their limitations and complications, all of which are neatly addressed by using an SVG pattern instead.

在网页背景中进行对角线设计的通常方法是使用一些三角函数来创建在正方形中无缝重复和平铺的图案，或者使用重复CSS线性渐变 。 两者都有其局限性和复杂性，所有这些都可以通过使用SVG模式来很好地解决。

SVG瓷砖 (SVG Tiles)

An SVG pattern is pretty much what it implies: an area that holds its own drawing information, which is then tiled across a larger space.

SVG模式几乎意味着它的含义：一个区域拥有自己的图形信息，然后将其平铺在更大的空间中。

In many cases, it’s easier to draw the pattern first, creating the SVG from the “inside out”. The basic template is:

在许多情况下，它更容易先绘制图案上，从而从“内向外”的SVG。 基本模板是：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
            <line x1="25" y="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
    </defs>
</svg>

There’s several things to note here:

这里有几件事要注意：

1. The SVG doesn’t have a viewBox, but uses a width and height instead, with both attributes set to 100%.

   SVG没有viewBox ，但是改用width和height ，两个属性都设置为100% 。

2. The <pattern> has its own width and height. patternUnits="userSpaceOnUse" means that these limits are used inside the pattern itself: they become the limits of the world the pattern occupies.

   <pattern>有其自己的 width和height 。 patternUnits="userSpaceOnUse"意味着这些限制在模式本身内部使用：它们成为该模式占用的世界的限制。

3. The <pattern> is defined inside a <defs> element, and <defs> will not render until they are referenced. For this reason, you might want to draw your SVG pattern in another document as an ordinary vector, ideally inside a viewBox of the same dimensions as the pattern (50 × 50, in this case). This allows you to visibly alter the pattern components before placing them inside the context of the <pattern> itself.

   <pattern>是在<defs>元素内定义的，并且<defs>在被引用之前不会呈现 。 因此，您可能希望将另一个普通文档中的SVG模式绘制为普通矢量，最好在与该模式具有相同尺寸(在这种情况下为50×50)的viewBox内。 这样，您可以在将样式组件放置在<pattern>本身的上下文之前，对其进行明显的更改。

4. In this case, our pattern consists of a vertical line that, due to its stroke, occupies exactly half of the pattern area.
   在这种情况下，我们的图案由一条垂直线组成，由于其笔触，它恰好占据了图案面积的一半。

We’re not quite done yet: to see the result, the pattern must be used to fill an SVG element. A rectangle makes the most sense:

我们尚未完成：要查看结果，必须使用该模式填充SVG元素。 矩形最有意义：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
            <line x1="25" y="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#pinstripe)" />
</svg>

The <rect> occupies the entire space of the SVG. It doesn’t matter if it is declared before or after the <defs>: the fill will find the referenced id of the pattern regardless:

<rect>占据SVG的整个空间。 无论在<defs>之前还是之后声明， fill都将找到模式的引用id ，无论如何：

Saved as pinstripe.svg, the result is applied as a background image to an HTML page, in much the same way as before:

另存为pinstripe.svg ，结果将作为背景图像应用于HTML页面，其方式与以前几乎相同：

body { 
    background-color: darkblue;
    background-image: url('pinstripe.svg');
}

The result tiles across the page just like before. At this point you might be justified in saying “So what? We did exactly that in the previous example, with less markup.”

结果像以前一样在页面上平铺。 此时，您可能会说“那又怎样？ 我们在上一个示例中做到了这一点，只是标记减少了。”

Ah, but here’s where it gets neat. Because the <pattern> is its own little world, we can do anything we want to it and have those changes reflected in the broader context of the page. Back in pinstripes.svg, alter the opening <pattern> tag to the following:

啊，但这就是整洁的地方。 因为<pattern>是它自己的小世界，所以我们可以对它做任何我们想做的事情，并将那些更改反映在页面的更广泛的上下文中。 返回pinstripes.svg ，将开始的<pattern>标记更改为以下内容：

<pattern id="pinstripe" patternTransform="rotate(45)" 
patternUnits="userSpaceOnUse" width="50" height="50">

Save the file, and refresh the HTML page. You’ll see that the background pattern is now at a 45° angle, with no need for judgement about position or tile size. The rotation can take any value, with the same result:

保存文件，并刷新HTML页面。 您会看到背景图案现在成45°角，无需判断位置或图块大小。 旋转可以取任何值，结果相同：

<pattern id="pinstripe" patternTransform="rotate(33)" 
patternUnits="userSpaceOnUse" width="50" height="50">

Again, the result tiles and repeats seamlessly. Want thinner lines? just reduce the stroke-width on the line element. Fewer lines on the page? Add a background-size declaration to the CSS.

再次，结果平铺并无缝重复。 需要更细的线条吗？ 只需减小line元素的stroke-width 。 页面上的行数较少？ 将background-size声明添加到CSS。

结论 (Conclusion)

Understanding the basics of SVG patterns opens up a world of creative possibilities for web page backgrounds: you can layer multiple patterns, creating complex seamless tiles easily from vector shapes. I’ll demonstrate some of those in the next article.

了解SVG模式的基础知识为网页背景开辟了无限的创意可能性：您可以对多个模式进行分层，轻松地从矢量形状创建复杂的无缝图块。 我将在下一篇文章中演示其中的一些。

Credit for making me aware of this technique is entirely due to Amelia Bellamy-Royds, who’s technical SVG books I’ve had the pleasure of reviewing over the past few weeks: it was in her writing that I discovered the inspiration for this article.

之所以能使我意识到这种技术，是因为我有幸在过去的几周里很高兴地回顾了Amelia Bellamy-Royds的技术SVG书籍 ：正是在她的写作中，我发现了本文的灵感。

翻译自: https://thenewcode.com/1048/Using-SVG-in-Web-Page-Backgrounds-Diagonals-and-Patterns

svg 灰色线填充图案