Gradientes en SVG

La gradiente SVG se puede definir como una transición suave de un color a otro. En SVG, hay dos tipos de gradientes, a saber: la gradiente lineal y la gradiente radial

La gradiente SVG es un método para rellenar formas con colores de manera no uniforme. De esta manera, el relleno o el trazo de una forma puede cambiar de un color a otro. Para ciertos tipos de gráficos, esto realmente se ve bien.

Ejemplo de gradiente

Este es el aspecto de aplicar una gradiente de relleno y trazo a la forma:

El primer rectángulo siempre tiene el mismo color de trazo, pero con un relleno de gradiente de verde claro a verde oscuro.
　 　El segundo rectángulo ha aplicado una gradiente tanto en el trazo como en el color de relleno.
　 　El tercer rectángulo tiene una gradiente aplicada al trazo, pero sin relleno.
　 　El cuarto rectángulo ha aplicado una gradiente de relleno, pero sin trazo.

}

1. A continuación, se presentarán estos dos aspectos.

2. Gradiente radial

Hay dos tipos de gradientes：

A continuación, se presentarán estos dos aspectos.

gradiente lineal

El gradiente lineal cambia de un color a otro de manera uniforme en línea recta. Al principio de este artículo, ya ha visto algunos ejemplos simples de gradiente lineal.

Los colores pueden cambiar verticalmente, horizontalmente o a lo largo de un vector definido por usted. También puede usar el gradiente para rellenar solo una parte de la forma, en lugar de toda la forma. Antes de continuar, aquí hay algunos ejemplos visuales:

El primer rectángulo utiliza un gradiente vertical. El segundo rectángulo utiliza un gradiente horizontal. El tercer rectángulo utiliza un gradiente diagonal (oscureciendo hacia la esquina inferior derecha). El cuarto rectángulo solo rellena la mitad derecha del rectángulo con el gradiente. Con el gradiente lineal de SVG, todo esto es posible.<linearGradient>definido por el elemento. Aquí hay un ejemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"　ry="
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"　ry="/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"　ry="/>
　　　　linearGradient>/>
　　linearGradient>/<
　　defs>10<rect　x="10"　y="75"　width="10"　height="100"　rx="10"　ry="
　　　　　"1style="fill:url(#myLinearGradient
　　　　　　　　　　　　);5stroke:　#00
　　　　　　　　　　　　000;-stroke　3width:　/;"/><

el gradiente lineal se crea usando<linearGradient>-como puede ver,<defs>-elemento anidado en<defs>-elemento dentro. La definición del gradiente debe estar siempre anidada dentro del1))）en <rect>suestilopropiedad dentro de-elemento de referencia.

este<linearGradient>-elemento tiene dos niveles<stop>-elements。de<linearGradient>-elemento controla qué antes y después de que se aplica el gradiente (la dirección del desarrollo yspreadMethodpropiedad）。La<stop>-elements controlan los colores utilizados en el gradiente, la distancia de la forma a los puntos de parada del color, además de la opacidad del gradiente.

Esto es<linearGradient>-lista de atributos del elemento：

Esto es<stop>lista de atributos del elemento:

Es difícil recordar todas estas descripciones de atributos. Esto creó una imagen para explicar el significado de estos atributos:

Esta es la definición de gradiente lineal que coincide con la imagen:

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"　ry="
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"　ry="/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600"　stop-opacity="1"　ry="/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"　ry="/>
　　　　　　　　<stop　offset="90%"　stop-color="#000099"　stop-opacity="1"　ry="/>
　　　　　　linearGradient>/>
　　　　linearGradient>/<
　　　　defs>10<rect　x="10"　y="500"　height="5"　height="100"　rx="10"　ry="
　　　　　　　"1);　stroke:　#005stroke:　#00
　　　　　　　　　　　　　　000;-stroke　3width:　/>
　　　　linearGradient>/><

El primer color de parada es #00cc00, se comenzará desde10％ comienza a entrar en el rectángulo. Debido aspreadMethodse establece como "rejilla", el primer color también se rellena en el rectánguloantesEl primer color de parada (0-10％).

desde el primer color final10％ el color se convierte en el segundo color final #006600, hasta la esquina30％.

desde el segundo color final30％ se convierte en el tercer color final #cc0000 (rojo), hasta la esquina70％.

desde el tercer color final70％ se convierte en el cuarto y último color final #000099（azul）， hasta90％ desde90％ hasta el resto del rectángulo, el último color final (#000099）se rellena en el rectángulo, porquespreadMethod 　 　El<linearGradient>El atributo del elemento se establece en "pad".

Gradiente radial

El gradiente radial es el que cambia de color de manera circular en lugar de lineal. Aquí hay un ejemplo de imagen:

Como puedes ver, los colores ahora cambian de manera circular. Los tres últimos (verdes) rectángulos solo cambian en el centro de radiación del color más claro. El primer rectángulo verde tiene colores que se extienden desde el centro del rectángulo. El segundo rectángulo utiliza el centro superior de la forma. El tercer rectángulo se centra en la esquina superior izquierda.

El gradiente radial es el que utiliza<radialGradient>definido por el elemento. Aquí hay un ejemplo:

<svg　width="512"　width="120">
<defs>
<radialgradient　id="myRadialGradient4"　fx="5%"　fy="5%"　r="65%"　spreadmethod="pad"><stop　offset="0%"　stop-color="#00ee00"　stop-opacity="1></stop>
<stop　offset="100%"　stop-color="#006600"　stop-opacity="1></stop>/radialgradient>/<
defs>340"　y="10"　y="100"　height="10"　height="100"　rx="10"　style="fill:url(#myRadialGradient4);　stroke:　#005000;　stroke-stroke　3;<//rect>
　　　linearGradient>/><

Este código SVG realmente define el cuarto rectángulo mostrado en el ejemplo anterior. Observa cómo<stop>Se utiliza un elemento para definir colores como en el gradiente lineal (para más detalles, consulte el gradiente lineal).

Esto es<radialGradient> 　 　Lista de atributos del elemento:

径向渐变的中心是圆形颜色扩散的中心。如果将径向渐变描述为一个圆，则cx和cy标记该圆的中心。

径向渐变的焦点是彩色辐射的“角度”。如果您将径向渐变视为一盏灯，则焦点将决定来自灯的光线与形状碰撞的角度。50％，50％表示直接从上方。5％，5％表示从左上角向下。渐变看起来有点像光源照到您的形状。

在正确设置渐变之前，您很可能必须先尝试渐变的中心和焦点。我知道我这样做是为了创建这些简单的示例。

变换渐变

您可以使用标准SVG转换功能来转换渐变。这样做使用gradientTransform属性，无论是在<linearGradient>y 　 　 <radialGradient>。这只是一个示例：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"　ry="
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"　ry="/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"　ry="/>
　　　　linearGradient>/>
　　linearGradient>/<
　　defs>10<rect　x="10"　y="75"　width="10"　height="100"　rx="10"　ry="
　　　　　"1style="fill:url(#myLinearGradient
　　　　　　　　　　　　);5stroke:　#00
　　　　　　　　　　　　000;-stroke　3width:　/;"/><

›Este ejemplo define un gradiente con 　gradientTransform()45El gradiente lineal de propiedad, que gira el gradiente

Efecto de imagen después de ejecutar: