Riempi e traccia in SVG usando C#

SVG (Scalable Vector Graphics) è un formato di file vettoriale compatibile con il Web basato su XML. Viene utilizzato per visualizzare informazioni visive su una pagina web. Le immagini SVG sono scalabili senza modificare la qualità dell’immagine. In questo articolo impareremo come lavorare con riempimento e tratto in SVG usando C#.

In questo articolo verranno trattati i seguenti argomenti:

1. API C# da riempire e accarezzare in SVG
2. Cos’è il riempimento SVG
3. Cos’è SVG Stroke
4. Tratti e riempimenti in SVG
5. Riempi e traccia cerchio in SVG
6. Riempi e traccia percorso in SVG
7. Applica riempimento e tratto usando Stile

API C# per riempire e tracciare in SVG

Per lavorare con gli attributi di riempimento e tratto di SVG in C#, utilizzeremo l’API Aspose.SVG for .NET. Consente il caricamento, l’analisi, il rendering, la creazione e la conversione di file SVG in formati popolari senza alcuna dipendenza dal software.

La classe SVGDocument dell’API rappresenta la radice della gerarchia SVG e contiene l’intero contenuto. Il metodo Save() di questa classe consente di salvare SVG nel percorso del file specificato. Il metodo QuerySelector() restituisce il primo elemento nel documento che corrisponde al selettore. L’API supporta il lavoro con forme popolari come rettangoli, cerchi, ellissi, linea, polilinee, ecc. L’API fornisce classi separate per rappresentare queste forme supportate come SVGCircleElement per cerchio, SVGPolygonElement per poligono, ecc.

Si prega di scaricare la DLL dell’API o installarla utilizzando NuGet.

PM> Install-Package Aspose.SVG

Che cos’è il riempimento SVG?

La proprietà di riempimento è uno degli attributi di presentazione SVG di base utilizzati per impostare il colore della forma all’interno del suo contorno.

Possiamo definire i seguenti attributi di riempimento:

• riempimento: imposta il colore da riempire. Specificare nessuno o trasparente se non c’è riempimento.
• fill-opacity: imposta il valore di opacità tra 0 e 1.
• fill-rule: definisce come viene determinata l’area interna di una forma, ad esempio diversa da zero, pari dispari.

Cos’è SVG Stroke?

La proprietà del tratto definisce il contorno o un bordo delle forme SVG. L’attributo di presentazione del tratto imposta il colore del contorno della forma.

Possiamo impostare i seguenti attributi del tratto:

• tratto: imposta il valore del colore.
• stroke-dasharray: specifica i tipi di linea tratteggiata.
• tratto trattino-offset
• stroke-linecap: controlla la forma delle estremità di linee come testa a testa, quadrato e rotondo.
• stroke-linejoin: specifica il modo in cui due linee si uniscono, ad esempio spigolo, smusso e arrotondamento.
• stroke-miterlimit: deve essere maggiore o uguale a 1 se utilizzato.
• tratto-opacità: imposta il valore di opacità tra 0 e 1.
• larghezza del tratto: imposta la larghezza.

Riempimenti e tratti in SVG

Sia il riempimento che il tratto vengono utilizzati per aggiungere colore, sfumature o motivi alla grafica in SVG. Il riempimento dipinge l’interno dell’elemento SVG, mentre il tratto ne dipinge il contorno. Possiamo specificare sia il riempimento che il tratto nell’attributo style o usarli come attributi di presentazione.

Possiamo impostare riempimenti SVG e tratti SVG nell’attributo style come mostrato di seguito:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

Possiamo anche utilizzare le stesse proprietà di stile negli attributi di presentazione come mostrato di seguito:

stroke="green" stroke-width="2" fill="#ff0000"

Per specificare il colore SVG, possiamo usare nomi di colore come rosso, blu, ecc. Possiamo anche usare valori RGB o valori HEX per i colori.

Riempi e traccia il cerchio in C#

Possiamo impostare le proprietà di riempimento SVG e tratto SVG per un cerchio seguendo i passaggi indicati di seguito:

1. Innanzitutto, carica un SVG esistente utilizzando la classe SVGDocument.
2. Quindi, ottieni l’elemento radice del documento.
3. Quindi, trova tutti gli elementi del cerchio usando il metodo QuerySelectorAll().
4. Successivamente, imposta gli attributi di riempimento per l’SVGCircleElement selezionato.
5. Facoltativamente, imposta gli attributi del tratto per l’SVGCircleElement selezionato.
6. Infine, salva l’immagine SVG di output usando il metodo Save().

Nell’esempio di codice seguente viene illustrato come impostare riempimento e tratto per un elemento circle di SVG in C#.

// Questo esempio di codice mostra come impostare gli attributi di riempimento e tratto per un elemento circle di SVG in C#.
// Carica un'immagine SVG esistente
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Ottieni l'elemento SVG radice del documento
var svgElement = document.RootElement;

// Trova tutti gli elementi del cerchio nell'elemento g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Ottieni il primo elemento cerchio
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Imposta gli attributi di riempimento
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Imposta gli attributi del tratto
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Salva l'SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

Di seguito trovi il contenuto dell’immagine Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Ecco il contenuto dell’immagine Fill-Circle.svg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Riempi e traccia il percorso in C#

Possiamo impostare le proprietà di riempimento SVG e tratto SVG per un elemento del percorso in SVG seguendo i passaggi indicati di seguito:

1. Innanzitutto, carica un SVG esistente utilizzando la classe SVGDocument.
2. Quindi, ottieni l’elemento radice del documento.
3. Quindi, ottieni l’elemento del percorso usando il metodo QuerySelector().
4. Successivamente, imposta gli attributi di riempimento per l’SVGPathElement selezionato.
5. Facoltativamente, imposta gli attributi del tratto per l’SVGPathElement selezionato.
6. Infine, salva l’immagine SVG di output usando il metodo Save().

Nell’esempio di codice seguente viene illustrato come impostare riempimento e tratto per un elemento del percorso di SVG in C#.

// Questo esempio di codice mostra come impostare gli attributi di riempimento e tratto per un elemento del percorso di SVG in C#.
// Carica un'immagine SVG esistente
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Ottieni l'elemento SVG radice del documento
var svgElement = document.RootElement;

// Ottieni il primo elemento del percorso
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Imposta gli attributi di riempimento
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Imposta gli attributi del tratto
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Salva l'SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

Di seguito troverai il contenuto dell’immagine Sample-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Di seguito trovi il contenuto dell’immagine Fill-Path.svg.

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Applica riempimento e tratto usando Stile in C#

Possiamo anche applicare le proprietà di riempimento SVG e tratto SVG utilizzando l’attributo di stile CSS seguendo i passaggi indicati di seguito:

1. Innanzitutto, crea un’istanza della classe SVGDocument.
2. Quindi, ottieni l’elemento radice del documento.
3. Quindi, crea un elemento circle usando il metodo CreateElementNS().
4. Quindi, imposta le proprietà di base del cerchio come Cx, Cy e R.
5. Quindi, applica l’attributo style usando il metodo SetAttribute().
6. Successivamente, aggiungi il figlio usando il metodo AppendChild().
7. Infine, salva l’immagine SVG di output usando il metodo Save().

L’esempio di codice seguente mostra come applicare il riempimento e il tratto usando lo stile CSS in C#.

// Questo esempio di codice mostra come applicare gli attributi di riempimento e tratto usando lo stile CSS in C#.
// Crea un nuovo SVG
using (var document = new SVGDocument())
{
    // Ottieni l'elemento SVG radice del documento
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Aggiungi cerchio
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Imposta l'attributo di stile
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Aggiungi cerchio all'elemento radice
    svgElement.AppendChild(circle);
    
    // Salva l'SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Ottieni una licenza temporanea gratuita

Puoi ottenere una licenza temporanea gratuita per provare Aspose.SVG per .NET senza limitazioni di valutazione.

Conclusione

In questo articolo abbiamo imparato a:

• crea una nuova immagine SVG;
• caricare un’immagine SVG esistente;
• modificare un’immagine SVG;
• impostare gli attributi di riempimento e tratto per le forme di SVG;
• imposta gli attributi di stile per le forme in C#.

Inoltre, puoi saperne di più su Aspose.SVG per .NET nella documentazione ed esplorare le diverse funzionalità supportate dall’API. In caso di ambiguità, non esitare a contattarci sul nostro forum.

Guarda anche

• Modifica il colore o lo sfondo SVG a livello di codice in C#