教程 SVG

Elemento SVG

Disegno di riempimento SVG Trasformazione SVG

Gradiente SVG

La progressione SVG può essere definita come una transizione fluida da un colore all'altro. In SVG, ci sono due tipi di progressioni, ovvero: la progressione lineare e la progressione radiale.

La progressione SVG è un metodo per riempire le forme con colori in modo non uniforme. In questo modo, il riempimento o il contorno della forma può cambiare da un colore all'altro. Per alcuni tipi di grafica, questo sembra davvero bene.

Esempi di progressione

Ecco come appare l'applicazione della progressione al riempimento e al contorno della forma:

Il primo rettangolo ha sempre lo stesso colore di contorno, ma il riempimento è una progressione da verde chiaro a verde scuro.
　　Il secondo rettangolo ha applicato la progressione sia al contorno che al riempimento.
　　Il terzo rettangolo ha applicato la progressione al contorno, ma non al riempimento.
　　Il quarto rettangolo ha applicato la progressione al riempimento, ma non al contorno.

Ci sono due tipi di progressioni:

Progressione lineare
径向渐变

Le seguenti sezioni presenteranno questi due aspetti.

Progressione lineare

La progressione lineare cambia uniformemente da un colore all'altro in modo lineare. All'inizio di questo articolo, hai già visto alcuni esempi semplici di progressione lineare.

I colori possono variare verticalmente, orizzontalmente o lungo la direzione definita. Puoi anche riempire solo una parte della forma con la progressione, non l'intera forma. Prima di continuare, ecco alcune esempi visivi:

Il primo rettangolo utilizza una progressione verticale. Il secondo rettangolo utilizza una progressione orizzontale. Il terzo rettangolo utilizza una progressione diagonale (scuro verso il basso a destra). Il quarto rettangolo riempie solo la metà destra del rettangolo con la progressione. Con la progressione lineare SVG, tutto questo è possibile.

La progressione lineare è utilizzata<linearGradient>元素定义的。这是一个示例：

Esempio

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

Testa per vedere‹/›

Come puoi vedere,<linearGradient>-elemento annidato in<defs>-elemento all'interno del quale la definizione della progressione deve sempre essere annidata.<defs>-elemento all'interno del quale possono essere richiamati in un'immagine SVG. In questo esempio, la progressione lineare è definita dall'attributo CSS (fill:url(#myLinearGradient1)). <rect>IlstyleRiferimento all'elemento 'elemento' all'interno delle proprietà.

Questo<linearGradient>-elementi hanno due elementi annidati<stop>-elementi.<linearGradient>-elementi controllano cosa prima e dopo che la gradiente viene applicata (la direzione di avvio eProprietà). Il<stop>-elementi controllano i colori utilizzati nella progressione, la distanza della forma dei colori di avvio e di fine, e l'opacità della progressione.

这是<linearGradient>-lista delle proprietà dell'elemento 'elemento':

attributi	描述
ID	用于从形状引用此渐变定义的唯一ID。
x1, y1	L'asse x1 e y1 del vettore (punto di partenza) definiscono la direzione della gradiente. Specificare in percentuale (%) x1, y1 e x2, y2 dell'oggetto alla quale applicare la progressione. (Attenzione: dovresti essere in grado di utilizzare numeri assoluti, ma sembra che non funzioni nei browser).
x2, y2	L'asse x2 e y2 della vettore (punto finale) definiscono la direzione della gradiente.
	Questo valore definisce come la progressione si espande all'interno della forma. Ci sono 3 valori possibili: riempimento, ripetizione e riflessione. "Pad" indica che il primo/ultimo colore della progressione viene espanso prima e dopo la progressione (esteso) nella progressione. "Ripetizione" significa che la progressione viene ripetuta in tutta la forma. "Riflessione" significa che la progressione si riflette sulla forma. Il metodo di dispersione viene utilizzato solo quando la progressione non può riempire completamente la forma (vedi l'attributo "spreadMethod", "第2段":"La radius della progressione.", "第3段":"[R", "第4段":"Attenzione: i valori di Firefox 3.0.5 sembrano essere inferiori al 5%%.", "第5段":"x e y del punto di fuoco della progressione radiale. Specificato come percentuale della larghezza e dell'altezza della forma da riempire. Se omesso, il valore predefinito è 50%% per entrambi.", "第6段":"fx, fy",`offset` 　　　　　　attributi`<stop>`)。
gradientTransform	Puoi trasformarla prima di applicare la progressione (ad esempio, ruotarla). Per ulteriori dettagli, consulta Trasformazione SVG。
gradientUnits	Impostare se utilizzare la cornice visiva ('userSpaceOnUse') o applicare una forma progressiva per calcolare x1, y1 e x2, y2.
xlink:href	Un altro ID di progressione, questa progressione dovrebbe "ereditare" le proprietà da questo ID. In altre parole, per qualsiasi proprietà, se non è impostato alcun valore per l'attributo in questa progressione, il valore dell'attributo di riferimento sarà il valore predefinito della progressione.

这是<stop>Elenco delle proprietà degli elementi:

attributi	描述
offset	La distanza dal colore di inizio (se il primo colore del gradiente) o di fine (se l'ultimo colore del gradiente) alla forma. Specificato come percentuale della forma alla quale viene applicato il gradiente (è in realtà un vettore di gradiente). Ad esempio, il 10% significa che il colore deve iniziare/finire al 10% della forma.
stop-color	Il colore del punto di fermata. I colori del gradiente passano da / a.
stop-opacity	L'opacità del colore del punto di fermata. Se l'opacità passa da un punto di fermata con un valore 1 a un altro con valore 0, il colore diventa sempre più trasparente.

Ricorda che descrivere tutte queste proprietà non è facile. Questo ha creato un'immagine per illustrare il significato di queste proprietà:

Questa è la definizione di gradiente lineare corrispondente all'immagine:

Esempio

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

Testa per vedere‹/›

Il primo colore di fermata è #00cc00, inizia a entrare nel rettangolo dal 10%. Poichéè stato impostato su “piedi”, il primo colore è anche riempito nel rettangoloPrimaIl colore della prima fermata (0-10%).

Dal 10% del colore di fermata primo al secondo colore di fermata #006600, raggiunge il 30% del rettangolo.

Dal 30% del colore di terminazione secondo al terzo colore di terminazione #cc0000 (rosso), raggiunge il 70% del rettangolo.

Dal 70% del colore di fermata terzo al quarto e ultimo colore di fermata #000099 (blu), raggiunge il 90%. Dal 90% al resto del rettangolo, l'ultimo colore di fermata (#000099) viene riempito nel rettangolo perché 　　该<linearGradient>元素的属性设置为“ pad”。

径向渐变

径向渐变是其中颜色呈圆形而非线性变化的渐变。这是一个示例图像：

正如您看到的，颜色现在以圆形方式变化。最后三个（绿色）矩形仅在最浅绿色的辐射中心发生变化。第一个绿色矩形具有从矩形中心散布的颜色。第二个矩形使用矩形的顶部中间。第三个矩形以左上角为中心。

径向渐变是使用<radialGradient>元素定义的。这是一个示例：

Esempio


<defs>

Testa per vedere‹/›

该SVG代码实际上定义了上面示例中显示的第四个矩形。注意如何<stop>像线性渐变一样使用元素定义颜色（有关说明，请参见线性渐变）。

这是<radialGradient> 　　元素的属性的列表：

attributi	描述
ID	用于从形状引用此渐变定义的唯一ID。
cy，cy	径向渐变中心的x和y。指定为要填充的形状的宽度和高度的百分比。如果省略，则默认均为50％。


	Questo valore definisce come la progressione si espande all'interno della forma. Ci sono 3 valori possibili: riempimento, ripetizione e riflessione. "Pad" indica che il primo/ultimo colore della progressione viene espanso prima e dopo la progressione (esteso) nella progressione. "Ripetizione" significa che la progressione viene ripetuta in tutta la forma. "Riflessione" significa che la progressione si riflette sulla forma. Il metodo di dispersione viene utilizzato solo quando la progressione non può riempire completamente la forma (vedi l'attributo "spreadMethod", "第2段":"La radius della progressione.", "第3段":"[R", "第4段":"Attenzione: i valori di Firefox 3.0.5 sembrano essere inferiori al 5%%.", "第5段":"x e y del punto di fuoco della progressione radiale. Specificato come percentuale della larghezza e dell'altezza della forma da riempire. Se omesso, il valore predefinito è 50%% per entrambi.", "第6段":"fx, fy",`offset` 　　　　　　attributi`<stop>`)。
gradientTransform	Puoi trasformare la progressione prima di applicarla (ad esempio, ruotare). Per informazioni dettagliate sutrasformazioniPer ulteriori dettagli, vedereTrasformazione SVG。
gradientUnits	impostare se utilizzare la cornice visiva ('userSpaceOnUse') o applicare la forma della progressione per calcolare x1, y1 e x2, y2. Di solito puoi ignorare questo attributo.
xlink:href	Un altro ID di progressione, questa progressione dovrebbe "ereditare" le proprietà da questo ID. In altre parole, per qualsiasi proprietà, se non è impostato alcun valore per l'attributo in questa progressione, il valore dell'attributo di riferimento sarà il valore predefinito della progressione.

Il centro della progressione radiale è il centro della diffusione del colore circolare. Se descrivi la progressione radiale come un cerchio, cx e cy indicano il centro del cerchio.

Il punto di fuoco della progressione radiale è l"angolo di radiazione del colore. Se vedi la progressione radiale come una lampada, il punto di fuoco determina l'angolo di collisione della luce proveniente dalla lampada con la forma. 50%，50% significa direttamente dall'alto. 5%，5% significa dal vertice in alto a sinistra. La progressione sembra un po' come la luce della sorgente che colpisce la tua forma.

Prima di impostare correttamente la progressione, è probabile che devi prima provare il centro e il punto di fuoco della progressione. So che faccio questo per creare questi semplici esempi.

trasformare la progressione

Puoi utilizzare trasformazioni standardTrasformazione SVGfunzione per trasformare la progressione.gradientTransformproprietà, sia in<linearGradient>e 　　 <radialGradient>。Questo è un esempio：

Esempio

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

Testa per vedere‹/›

Questo esempio definisce congradientTransform() 　Gradiente lineare delle proprietà, il gradiente gira di 45 gradi. Di solito, il gradiente classifica i colori dall'alto verso il basso, ma ora, grazie alla rotazione, parte dall'angolo in alto a destra verso l'angolo in basso a sinistra.

Effetto immagine dopo l'esecuzione:

Disegno di riempimento SVG Trasformazione SVG