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 引用渐变的元素。 渐变本身通常留在文档的<d