svg 渐变_了解线性SVG渐变

svg 渐变

While CSS gradients are now a standard approach for most web designers, SVG gradients still hold a few advantages… and if you’re going to use SVG elements, it makes sense to understand how gradients work in that context.

尽管CSS渐变现在已成为大多数Web设计人员的标准方法，但是SVG渐变仍然具有一些优势……并且，如果您要使用SVG元素，那么了解渐变在这种情况下的工作原理是有意义的。

亲吻表兄弟 (Kissing Cousins)

Gradients in CSS and SVG are essentially cousins, with the final CSS specification taking a great deal of inspiration from the SVG spec. The major difference is that SVG - like everything else in the language - presents the gradient as markup. This makes SVG gradients more verbose, but also potentially easier to read and understand.

CSS和SVG中的渐变本质上是表亲，最终CSS规范从SVG规范中获得了很多启发。 主要区别在于SVG(与语言中的其他所有内容一样)将渐变表示为标记 。 这使SVG渐变更加冗长，但也可能更易于阅读和理解。

In SVG, a linear gradient (a gradient that shifts from one color to the next along a line) is defined in the following way:

在SVG中，以以下方式定义线性渐变(渐变从一种颜色到另一种颜色沿一条线)：

<linearGradient id="testbed">
    <stop stop-color="salmon" offset="0" />
    <stop stop-color="aliceblue" offset="1" />
</linearGradient>

This gradient isn’t displayed by default; to do so, we must create an SVG document with an element that references the gradient via its id. The gradient itself is usually left in the <defs> section of the document:

默认情况下不显示此渐变； 为此，我们必须创建一个SVG文档，其中包含一个通过其id 引用渐变的元素。 渐变本身通常留在文档的<defs>部分中：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 50">
  <defs>
        <linearGradient id="testbed1">
            <stop stop-color="salmon" offset="0" />
            <stop stop-color="aliceblue" offset="1" />
        </linearGradient>
  </defs>
<rect x="0" y="0" width="100" height="50" fill="url(#testbed1)" />
</svg>

The result:

结果：

A few things should be pointed out at this stage:

在此阶段应该指出一些事情：

1. By default the gradient proceeds left to right, although that can be changed easily; I’ll show you how in a moment.

   默认情况下，渐变从左到右进行 ，尽管可以轻松更改。 一会儿，我会告诉你。

2. The stop elements are similar to the “stop” handles for gradients in PhotoShop and other Adobe products.

   stop元素类似于PhotoShop和其他Adobe产品中用于渐变的“停止”手柄。

3. The offset positions - written as values from 0 to 1 or as percentages from 0% to 100% - indicate where the specified colors radiate from.

   offset位置-从0到1值或从0%到100%百分数表示-指示指定的颜色从何处发出。

4. The colors used in the gradient can derive from any of the CSS color systems.
   渐变中使用的颜色可以来自任何CSS颜色系统。

5. The fill reference could also be written as pure CSS. The markup for the rectangle would change to:

   fill参考也可以写为纯CSS。 矩形的标记将更改为：

<rect x="0" y="0" width="100" height="33" />

And the CSS:

和CSS：

rect {
    fill: url(#testbed);
}

In general, my preference would be to use the CSS method, as it’s more flexible, but the choice is yours.

通常，我更喜欢使用CSS方法，因为它更灵活，但是选择是您自己的。

硬停止 (Hard Stops)

Gradients don’t have to appear as subtle washes from one color gradually shading into another. Place the stops close enough together, and you can create hard transitions:

渐变没有出现从一种颜色逐渐遮蔽成另一种微妙的洗涤。 将停靠点放在一起足够近，您可以创建硬过渡：

<linearGradient id="testbed2">
    <stop stop-color="red" offset="0.5" />
    <stop stop-color="blue" offset="0.5" />
</linearGradient>

Creating:

创建：

不透明度 (Opacity)

At the other end of the scale, it’s also possible to create gradient color components with levels of opacity using the stop-opacity attribute:

在比例尺的另一端，也可以使用stop-opacity属性创建具有不透明度级别的渐变颜色分量：

<linearGradient id="testbed3">
    <stop stop-color="yellow" offset="0" stop-opacity="0" />
    <stop stop-color="blue" offset="0.5" />
    <stop stop-color="black" offset="1" stop-opacity="0.5" />
</linearGradient>

Which creates:

哪个创建：

Using CSS colors with an alpha component for color-stop values will not produce the same effect in SVG.

将CSS颜色与alpha分量一起用作color-stop值将不会在SVG中产生相同的效果。

方向性 (Directionality)

Rather than taking an angle, as CSS does, SVG gradients take points, defined as x1, y1, x2 and y2, to define the direction of a linear gradient. These points are just like the points used to define an SVG line.

而不是采取的角度，如CSS确实，SVG梯度取分 ，定义为x1 ， y1 ， x2和y2 ，以限定的线性梯度的方向。 这些点就像用来定义SVG线的点 。

Note not all of these attributes are required to have values when you create a gradient, since by default, they are all set to 0, with the exception of x2, which defaults to a value of 100%… creating the left-to-right default display of SVG linear gradients.

请注意，在创建渐变时，并非所有这些属性都必须具有值，因为默认情况下，它们均设置为0 ， x2除外， x2默认值是100% …创建从左到右SVG线性渐变的默认显示。

A diagonal gradient will therefore be created by setting y2 to a value of 100%:

因此，将y2设置为100%即可创建对角线渐变：

<linearGradient id="testbed4" y2="100%">
    <stop stop-color="yellow" offset="0" />
    <stop stop-color="blue" offset="0.5" />
    <stop stop-color="black" offset="1" />
</linearGradient>

Note that this does not create a 45° gradient, as the values are relative to the dimensions of the element, not an absolute position:

请注意，这不会产生有45°的梯度，因为值是相对于所述的尺寸element ，而不是绝对位置：

锥形和网格渐变？ (Conical & Mesh Gradients?)

Like CSS, SVG currently only supports linear and radial gradients. However, conical gradients (gradients that “sweep” around in an arc) are proposed for CSS, and mesh gradients (gradients in two-dimensional mesh, with weighted colors emanating from each point) are planned for SVG2. Lea Verou has an excellent conical gradient polyfill for CSS that uses canvas and SVG to generate the required shape and fill.

像CSS一样，SVG当前仅支持线性和径向渐变。 但是，为CSS提出了锥形渐变(沿弧线“倾斜”的渐变)，为SVG2计划了网格渐变(二维网格中的渐变，从每个点发出加权的颜色)。 Lea Verou具有出色CSS锥形渐变填充，它使用画布和SVG生成所需的形状和填充。

其他可能性 (Other Possibilities)

It’s also possible to create repeated and reflected gradients in SVG; I will cover those in a separate article, since the same is true for radial gradients (which I will look at next).

也可以在SVG中创建重复的和反射的渐变。 我将在另一篇文章中介绍这些内容，因为径向渐变也是如此(我将在后面介绍)。

优势与结论 (Advantages & Conclusion)

There are a few advantages to SVG gradients, mostly related to animation: while CSS gradients should be animatable, very few browsers support that feature at the moment. SVG gradients can be animated: either using SMIL (with the exception of Internet Explorer / Edge, which has never supported SMIL) or with JavaScript. Obviously, SVG gradients are also a natural match when creating SVG.

SVG渐变有一些优点，主要与动画有关：CSS渐变应该是可动画的，但目前很少有浏览器支持该功能。 可以对SVG渐变进行动画处理：使用SMIL(不支持SMIL的Internet Explorer / Edge除外)或JavaScript。 显然，创建SVG时，SVG渐变也是自然的匹配。

翻译自: https://thenewcode.com/1155/Understanding-Linear-SVG-Gradients

svg 渐变