svg背景色放网页看不见图_在网页背景中使用SVG：条纹

svg背景色放网页看不见图

Resolution independent, small in file size and easy to edit, vector images have several advantages when it comes to designing web page backgrounds over CSS gradients:

与分辨率无关，文件大小小且易于编辑，在设计通过CSS渐变设计的网页背景时，矢量图像具有多个优点：

1. SVG syntax for stripes is easier and less verbose than CSS gradients.
   与CSS渐变相比，用于条纹的SVG语法更容易且更冗长。
2. SVG backgrounds have better browser support (SVG is supported in IE9, but CSS gradients are not supported in Internet Explorer until v10).
   SVG背景具有更好的浏览器支持(IE9支持SVG，但Internet Explorer直到v10才支持CSS渐变)。
3. SVG backgrounds can be made much more complex than those made with pure CSS.
   SVG背景可以比纯CSS背景复杂得多。

But to be effective, vector illustrations need to follow a few rules:

但是要有效，矢量插图需要遵循一些规则：

一般准则 (General Guidelines)

• Just like repeated bitmap backgrounds, you only need one seamless “tile” or <pattern> of an SVG for it to be usable: you don’t have to build the whole thing.

  就像重复的位图背景一样 ，您只需要使用一个无缝的SVG“平铺”或<pattern>即可使用它：不必构建整个事物。

• Keep the SVG file as small, “light”, and editable as possible: this usually means a little hand-editing and tweaking.
  保持SVG文件尽可能小，“浅”并且可编辑：这通常意味着需要手工编辑和微调。

• It’s a good idea to keep at least one color component of the background in your CSS for the greatest flexibility.

  最好在CSS中保留背景的至少一种颜色成分 ，以实现最大的灵活性。

A few examples should be enough to get you started. Note that these concentrate on repeated backgrounds: giant single SVG backgrounds are treated much the same way as giant bitmap background images.

几个例子应该足以让您入门。 请注意，这些都集中在重复的背景上：巨型单个SVG背景与巨型位图背景图像的处理方式几乎相同。

简单的SVG条纹 (Simple SVG Stripes)

A simple “stripe” effect is nothing more than a filled area beside a blank space, repeated infinitely. In the case of SVG, the easiest way to make this filled area to use a rectangle element. Save the following code as stripe.svg:

一个简单的“条纹”效果就是无限重复的空白旁边的填充区域。 对于SVG，最简单的方法是使该填充区域使用矩形元素 。 将以下代码另存为stripe.svg ：

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <rect width="0.5" height="1" />
</svg>

Note that the viewBox or the equivalent width and height attributes can be used to size the <svg> element for the purposes of creating background images.

注意，为了创建背景图像，可以使用viewBox 或等效的width和height属性来调整<svg>元素的大小。

This SVG file can be applied to the background of a web page using:

可以使用以下命令将此SVG文件应用于网页的背景：

body {
	background-image: url(stripe.svg);
}

By default, the SVG will expand to cover the entire space of the element. This effectively divides the page into half black (the default fill of the SVG rectangle) and half white (the default background color of the web page, as any area not explicitly colored in SVG is automatically transparent).

默认情况下，SVG将展开以覆盖元素的整个空间。 这样可以有效地将页面分为半黑(SVG矩形的默认填充)和半白(网页的默认背景色，因为任何未在SVG中显式着色的区域都是自动透明的)。

To make this SVG pattern repeat more than once, we can change the background-size in the CSS declaration: x width, followed by y height.

要使此SVG模式重复多次，我们可以在CSS声明中更改background-size ：x宽度，后跟y高度。

body {
    background-image: url(stripe.svg);
    background-size: 20px 20px;
}

This produces:

这将产生：

One nice aspect of having a small “tight” SVG illustration is that it’s easy to change this from a vertical to a horizontal stripe by altering the background-size:

background-size SVG插图的一个不错的方面是，通过更改background-size ，可以很容易地将其从垂直条纹更改为水平条纹：

Horizontal Pinstripe: body { background-size: 1px 10px; }

水平细条纹： body { background-size: 1px 10px; } body { background-size: 1px 10px; }

Vertical Pinstripe:: body { background-size: 10px 1px; }

垂直细条纹：： body { background-size: 10px 1px; } body { background-size: 10px 1px; }

For more versatility, you could color the stripe using rgba or hsla, and address the background-color of the page in the CSS:

为了获得更多的通用性，您可以使用rgba或hsla为条纹hsla ，并在CSS中处理页面的background-color ：

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
</svg>

The CSS:

CSS：

body {
	background-image: url(stripe.svg);
	background-size: 20px 20px;
	background-color: #669;
}

This SVG file is small enough to write inline into the CSS itself, saving an HTTP request:

这个SVG文件足够小，可以内联写入CSS本身，从而保存HTTP请求：

body {
	background-image:  url('data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>');
	background-size: 20px 20px;
}

Be careful with quotes when doing this! This SVG uses double quotes internally, meaning that single quotes are used on the outside to avoid confusing the browser.

这样做时请小心引号！ 该SVG在内部使用双引号，这意味着在外部使用单引号以避免混淆浏览器。

You could also base64-encode the SVG file and use that inline in the CSS:

您还可以对SVG文件进行base64编码，并在CSS 中内联使用：

body {
    background-image:  url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+');
}

Doing so is optional, and does have three disadvantages:

这样做是可选的，确实有三个缺点：

• the DataURI version takes up more space than the inline SVG

  DataURI版本比嵌入式SVG占用更多空间

• converting the image into base64 makes it non-editable (to make any changes, you’d have to find the original SVG, edit it, convert the result into base64, and add the new code back into the CSS).
  将图像转换为base64使其不可编辑(要进行任何更改，您必须找到原始SVG，对其进行编辑，将结果转换为base64，然后将新代码添加回CSS中)。
• unencoding base 64 is slower on mobile platforms.
  在移动平台上，未编码的base 64较慢。

However, using base-64 SVG inline does give you a little more cross-browser compatibility; ultimately, the decision is up to you.

但是，使用base-64 SVG内联确实为您提供了跨浏览器的兼容性。 最终，决定权取决于您。

分隔线 (Separating The Lines)

It’s easy to make the lines thicker and thinner in our example using background-size, but the one thing this won’t do is change the ratio between the thickness of the lines and the space between them. To alter that, we go back to the SVG and make the rectangle narrower or wider:

在我们的示例中，使用background-size可以使线条变粗和变细，但这很简单，但要做的一件事就是更改线条粗细与线条之间的间距之比 。 要更改此设置，我们返回SVG，使rectangle变窄或变宽：

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<rect width=".25" height="1" />
</svg>

Which produces:

产生：

制作更复杂的图案 (Making More Complex Patterns)

Once you have the basics, it’s easy to produce more complex variations of horizontal and vertical stripes in SVG. For example, a gingham pattern would be a ⅓ width rectangle overlaying a ⅓ height element:

一旦掌握了基础知识，就可以轻松地在SVG中产生水平和垂直条纹的更复杂的变化。 例如，方格图案应为＆frac13;。 覆盖＆frac13;的宽度矩形 高度元素：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g fill="rgba(0,0,0,0.3)">
    <rect width="100" height="33" />
    <rect width="33" height="100" x="67" />
  </g>
</svg>

You can see a variation on this technique at the top of this article, incorporating stroke-dasharray to provide further decoration: a good example of a pattern that is impossible to achieve with CSS gradients.

您可以在本文的顶部看到此技术的一种变体，它结合了stroke-dasharray来提供进一步的修饰：这是CSS渐变无法实现的模式的一个很好的例子。

The same concepts can be used to create plaids and tartans, although the more complex of these should probably use SVG’s <pattern> syntax, discussed in the next article.

可以使用相同的概念来创建格子和格子呢，尽管其中更复杂的应该使用SVG的<pattern>语法，这将在下一篇文章中进行讨论。

翻译自: https://thenewcode.com/1045/Using-SVG-in-Web-Page-Backgrounds-Stripes

svg背景色放网页看不见图