výplň a tah v SVG pomocí C#

SVG(Scalable Vector Graphics) je webový formát vektorového souboru založený na XML. Umožňuje vývojářům a návrhářům vytvářet vektorovou grafiku pomocí bodů, čar, cest a tvarů. Můžete jej použít k navrhování log, ikon, jednoduché grafiky a animací. Každý textový editor může vytvářet a upravovat obrázky SVG, protože jsou nezávislé na rozlišení. Design je jedním z nejdůležitějších aspektů vytváření SVG, ale stejně důležitá je také barva. Barvy lze aplikovat na tvary, čáry, cesty a texty SVG. Je možné barvit, texturovat, stínovat nebo vytvářet grafiku SVG z částečně průhledných překrývajících se vrstev. V tomto článku se naučíme pracovat s SVG Fill Color a SVG Stroke Color v C#.

Tento článek bude obsahovat následující témata:

  1. SVG C# API pro SVG výplň a barvu tahu
  2. Co je výplň SVG
  3. Co je to SVG Stroke
  4. Jak používat výplň SVG a tah SVG?
  5. Jak používat barvu výplně SVG a barvu tahu SVG
  6. Vyplňte a vytáhněte kruh v SVG
  7. Vyplnit a vytáhnout cestu v SVG
  8. Použít výplň a tah pomocí stylu

SVG C# API pro SVG výplň a barvu tahu

Abychom mohli pracovat s barvami výplně SVG a barvou tahu SVG v C#, budeme používat Aspose.SVG for .NET API. Umožňuje načítání, analýzu, vykreslování, vytváření a konverzi souborů SVG do oblíbených formátů bez jakékoli softwarové závislosti.

Třída SVGDocument API představuje kořen hierarchie SVG a obsahuje celý obsah. Metoda Save() této třídy umožňuje uložit SVG do zadané cesty k souboru. Metoda QuerySelector() vrátí první prvek v dokumentu odpovídající selektoru. Rozhraní API podporuje práci s oblíbenými tvary, jako jsou obdélníky, kruhy, elipsy, čáry, křivky atd. Rozhraní API poskytuje samostatné třídy pro reprezentaci těchto podporovaných tvarů, jako je SVGCircleElement pro kruh, SVGPolygonElement pro mnohoúhelník atd.

Prosím buď stáhněte si DLL API, nebo jej nainstalujte pomocí NuGet.

PM> Install-Package Aspose.SVG

Co je SVG Fill?

Vlastnost výplně je jedním ze základních atributů prezentace SVG, které se používají k nastavení barvy tvaru uvnitř jeho obrysu.

Můžeme definovat následující atributy výplně:

  • výplň: Nastaví barvu výplně. Pokud není žádná výplň, zadejte žádné nebo průhledné.
  • fill-opacity: Nastavuje hodnotu krytí mezi 0 až 1.
  • fill-rule: Definuje, jak je určena vnitřní oblast tvaru, například nenulová, sudá lichá.

Co je to SVG Stroke?

Vlastnost tahu definuje obrys nebo ohraničení tvarů SVG. Atribut prezentace tahu nastavuje barvu obrysu tvaru.

Můžeme nastavit následující atributy tahu:

  • tah: Nastaví hodnotu barvy.
  • stroke-dasharray: Určuje typy přerušovaných čar.
  • tah-dashoffset
  • stroke-linecap: Řídí tvar konců čar, jako jsou tupé, čtvercové a kulaté.
  • stroke-linejoin: Určuje způsob spojení dvou čar, například pokos, zkosení a zaoblení.
  • stroke-miterlimit: Musí být větší nebo roven 1, pokud je použit.
  • stroke-opacity: Nastaví hodnotu krytí mezi 0 až 1.
  • stroke-width: Nastavuje šířku.

Jak používat SVG Fill a SVG Stroke?

Výplň i tah se používají k přidávání barev, přechodů nebo vzorů do grafiky ve formátu SVG. Výplň vykreslí vnitřek prvku SVG, zatímco tah vykreslí jeho obrys. V atributu stylu můžeme zadat výplň i tah nebo je použít jako atributy prezentace.

V atributu style můžeme nastavit výplně SVG a tahy SVG, jak je uvedeno níže:

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

Můžeme také použít stejné vlastnosti stylu v atributech prezentace, jak je uvedeno níže:

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

Jak používat barvu výplně SVG a barvu tahu SVG

Specifikace barev zahrnuje řadu pravidel, jako například:

  • Výchozí barva je černá, pokud není zadán atribut výplně.

  • Pokud má atribut výplně žádnou nebo průhlednou hodnotu, tvar nebude vyplněn žádnou barvou.

  • Pokud není zadán atribut zdvihu, nedojde k žádnému tahu, i když je zadán atribut šířky tahu.

Pro specifikaci barvy SVG můžeme použít názvy barev jako červená, modrá atd. Pro barvy můžeme použít i hodnoty RGB nebo HEX hodnoty. Níže naleznete několik příkladů znázorňujících různé způsoby nastavení barev výplně a tahu:

  • Názvy barev SVG

Specifikace SVG definuje 147 názvů barev. Můžeme nastavit jakoukoli barvu zadáním jejího názvu, jak je uvedeno níže:

stroke="Green"

fill="Red"
  • HEX kódy barev

Můžeme také specifikovat šestimístný (6) číselný kód barvy reprezentovaný ve tvaru #RRGGBB. Existují dvoumístné hexadecimální páry pro tři barvy (červená, zelená a modrá) s hodnotami v rozsahu od 00 do FF. Můžeme nastavit zelenou a červenou barvu pomocí hodnoty HEX, jak je uvedeno níže:

stroke="#00FF00"

fill="#FF0000"
  • RGB (červená, modrá, zelená) barevné kódy

Můžeme zadat hodnoty barev RGB v rozsahu od 0 do 255. Hodnoty zelené a červené barvy RGB můžeme nastavit, jak je uvedeno níže:

stroke="rgb(0,255,0)"

fill="rgb(255,0,0)"
  • Barevné kódy RGBA (červená, modrá, zelená, alfa).

Hodnoty barev RGBA jsou hodnoty barev RGB vylepšené alfa kanálem pro určení jejich krytí. Je to číslo mezi 0,0 a 1,0, které určuje průhlednost. Můžeme získat zelené a červené barvy RGB, jak je znázorněno níže:

stroke="rgba(0,255,0,1.0)"

fill="rgba(255,0,0,1.0)"
  • HSL barevné kódy

HSL je zkratka pro Hue, Saturation and Lightness. Každá barva v HSL má úhel na barevném kole RGB a také hodnotu intenzity a sytosti v procentech. Můžeme získat HSL kódy pro zelené a červené barvy, jak je uvedeno níže:

stroke="hsl(120, 100%, 50%)"

fill="hsl(0, 100%, 50%)"
  • HSLA (odstín, sytost, světlost, alfa) barevné kódy

Přidání hodnoty alfa kanálu do hodnoty barvy HSL umožňuje specifikovat krytí barvy. Můžeme získat kódy HSLA pro zelené a červené barvy, jak je uvedeno níže:

 stroke="hsla(120, 100%, 50%, 1.0)"

fill="hsla(0, 100%, 50%, 1.0)"

Vyplňte a vytáhněte kruh v C#

Vlastnosti výplně SVG a tahu SVG pro kruh můžeme nastavit podle následujících kroků:

  1. Nejprve načtěte existující SVG pomocí třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté najděte všechny prvky kruhu pomocí metody QuerySelectorAll().
  4. Poté nastavte atributy výplně pro vybraný prvek SVGCircleElement.
  5. Volitelně nastavte atributy tahu pro vybraný prvek SVGCircleElement.
  6. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak nastavit výplň a tah pro prvek kruhu SVG v C#.

// Tento příklad kódu ukazuje, jak nastavit atributy výplně a tahu pro prvek kruhu SVG v C#.
// Načtěte existující obrázek SVG
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Získejte kořenový prvek SVG dokumentu
var svgElement = document.RootElement;

// Najděte všechny prvky kruhu v prvku g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Získejte první prvek kruhu
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Nastavte atributy výplně
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Nastavte atributy tahu
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Uložte SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");
Fill-and-Stroke-Circle-in-CSharp

Nastavte výplň a tah pro prvek kruhu v C#.

Níže naleznete obsah obrázku 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>

Zde je obsah obrázku 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>

Cesta výplně a tahu v C#

Vlastnosti výplně SVG a tahu SVG pro prvek cesty v SVG můžeme nastavit podle následujících kroků:

  1. Nejprve načtěte existující SVG pomocí třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté pomocí metody QuerySelector() získejte prvek cesty.
  4. Poté nastavte atributy výplně pro vybraný prvek SVGPathElement.
  5. Volitelně nastavte atributy tahu pro vybraný prvek SVGPathElement.
  6. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak nastavit výplň a tah pro element cesty SVG v C#.

// Tento příklad kódu ukazuje, jak nastavit atributy výplně a tahu pro element cesty SVG v C#.
// Načtěte existující obrázek SVG
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Získejte kořenový prvek SVG dokumentu
var svgElement = document.RootElement;

// Získejte první prvek cesty
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Nastavte atributy výplně
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Nastavte atributy tahu
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Uložte SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");
Vyplňte a vytáhněte-cesta-v-CSharp

Nastavte výplň a tah pro element cesty v C#.

Níže naleznete obsah obrázku 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>

Níže naleznete obsah obrázku 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>

Použít výplň SVG a tah SVG pomocí stylu v C#

Můžeme také použít vlastnosti výplně SVG a tahu SVG pomocí atributu stylu CSS podle následujících kroků:

  1. Nejprve vytvořte instanci třídy SVGDocument.
  2. Dále získejte kořenový prvek dokumentu.
  3. Poté pomocí metody CreateElementNS() vytvořte prvek kruhu.
  4. Dále nastavte základní vlastnosti kruhu, jako je Cx, Cy a R.
  5. Poté použijte atribut stylu pomocí metody SetAttribute().
  6. Poté připojte potomka pomocí metody AppendChild().
  7. Nakonec uložte výstupní obraz SVG pomocí metody Save().

Následující ukázka kódu ukazuje, jak použít výplň a tah SVG pomocí stylu CSS v C#.

// Tento příklad kódu ukazuje, jak použít atributy výplně a tahu pomocí stylu CSS v C#.
// Vytvořte nový SVG
using (var document = new SVGDocument())
{
    // Získejte kořenový prvek SVG dokumentu
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Přidat kruh
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Nastavit atribut stylu
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Přidejte kruh do kořenového prvku
    svgElement.AppendChild(circle);
    
    // Uložte SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}
Použít-vyplnit-a-táhnout-pomocí-stylu-v-CSharp

Použijte výplň a tah pomocí stylu CSS

<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>

Získejte bezplatnou dočasnou licenci

Můžete získat bezplatnou dočasnou licenci a vyzkoušet Aspose.SVG pro .NET bez omezení hodnocení.

Závěr

V tomto článku jsme se naučili, jak:

  • vytvořit nový obrázek SVG;
  • načíst existující obrázek SVG;
  • upravit obrázek SVG;
  • nastavit atributy výplně a tahu pro tvary SVG;
  • nastavit atributy stylu pro tvary v C#.

Kromě toho se můžete dozvědět více o Aspose.SVG pro .NET v dokumentaci a prozkoumat různé funkce podporované rozhraním API. V případě jakýchkoliv nejasností nás neváhejte kontaktovat na našem fóru.

Viz také