SVG Fill Color och SVG Stroke Color i C#

SVG(Scalable Vector Graphics) är ett XML-baserat webbvänligt vektorfilformat. Det gör det möjligt för utvecklare och designers att skapa vektorgrafik med hjälp av punkter, linjer, banor och former. Du kan använda den för att designa logotyper, ikoner, enkel grafik och animationer. Alla textredigerare kan skapa och redigera SVG-bilder eftersom de är upplösningsoberoende. Design är en av de viktigaste aspekterna av att skapa SVG, men färgen är också lika kritisk. Färger kan appliceras på SVG-former, linjer, banor och texter. Det är möjligt att färglägga, strukturera, skugga eller bygga SVG-grafik från delvis transparenta överlappande lager. I den här artikeln kommer vi att lära oss hur du arbetar med SVG Fill Color och SVG Stroke Color i C#.

Följande ämnen ska behandlas i den här artikeln:

1. SVG C# API för SVG Fill and Stroke Color
2. Vad är SVG Fill
3. Vad är SVG Stroke
4. Hur man använder SVG Fill och SVG Stroke?
5. Hur man använder SVG fyllningsfärg och SVG linjefärg
6. Fyll och stryk cirkel i SVG
7. Fyll och stryk väg i SVG
8. Applicera Fill och Stroke med Style

SVG C# API för SVG Fill and Stroke Color

För att arbeta med SVG Fill Color och SVG Stroke Color i C# kommer vi att använda Aspose.SVG for .NET API. Det tillåter att ladda, analysera, rendera, skapa och konvertera SVG-filer till populära format utan några mjukvaruberoenden.

Klassen SVGDocument i API:t representerar roten till SVG-hierarkin och innehåller hela innehållet. Metoden Save() för denna klass tillåter att SVG sparas till den angivna sökvägen. Metoden QuerySelector() returnerar det första elementet i dokumentet som matchar väljaren. API:et stöder att arbeta med populära former som rektanglar, cirklar, ellipser, linje, polylinjer etc. API tillhandahåller separata klasser för att representera dessa stödda former som SVGCircleElement för cirkel, SVGPolygonElement för polygon, etc.

Vänligen antingen ladda ned DLL för API:t eller installera den med NuGet.

PM> Install-Package Aspose.SVG

Vad är SVG Fill?

Fill-egenskapen är ett av de grundläggande SVG-presentationsattributen som används för att ställa in färgen på formen innanför dess kontur.

Vi kan definiera följande fyllningsattribut:

• fyll: Ställer in färgen som ska fyllas. Ange ingen eller genomskinlig om det inte finns någon fyllning.
• fill-opacitet: Ställer in opacitetsvärdet mellan 0 och 1.
• fill-rule: Definierar hur insidan av en form bestäms, till exempel icke-noll, jämn udda.

Vad är SVG Stroke?

Egenskapen stroke definierar konturen eller en kant av SVG-former. Attributet för linjepresentation anger färgen på formens konturer.

Vi kan ställa in följande slagattribut:

• linje: Ställer in färgvärdet.
• stroke-dasharray: Anger de streckade linjetyperna.
• slag-streckförskjutning
• stroke-linecap: Styr formen på ändarna av linjer som rumpa, fyrkantiga och runda.
• stroke-linejoin: Anger hur två linjer sammanfogas, såsom gering, fas och rund.
• stroke-miterlimit: Måste vara större än eller lika med 1 om den används.
• stroke-opacitet: Ställer in opacitetsvärdet mellan 0 och 1.
• stroke-width: Ställer in bredden.

Hur man använder SVG Fill och SVG Stroke?

Både fyllningen och strecket används för att lägga till färg, övertoningar eller mönster till grafik i SVG. Fyllningen målar insidan av SVG-elementet, medan strecket målar dess kontur. Vi kan ange både fyllning och linje i stilattributet eller använda dem som presentationsattribut.

Vi kan ställa in SVG-fyllningar och SVG-linjer i stilattributet som visas nedan:

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

Vi kan också använda samma stilegenskaper i presentationsattributen som visas nedan:

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

Hur man använder SVG Fill Color och SVG Stroke Color

Färgspecifikation involverar en mängd olika regler, såsom:

• Standardfärgen är svart, om fyllningsattributet inte anges.

• Formen kommer inte att fyllas med någon färg om fill-attributet har ett none eller transparent värde.

• Det kommer inte att finnas någon linje om strokeattributet inte anges även om stroke-width-attributet är angivet.

För att specificera SVG-färgen kan vi använda färgnamn som röd, blå, etc. Vi kan också använda RGB-värden eller HEX-värden för färgerna. Nedan hittar du några av exemplen som visar olika sätt att ställa in fyllnings- och streckfärger:

• SVG-färgnamn

SVG-specifikationen definierar 147 färgnamn. Vi kan ställa in vilken färg som helst genom att ange dess namn enligt nedan:

stroke="Green"

fill="Red"

• HEX färgkoder

Vi kan också specificera sex (6) siffrig färgkod representerad i form av #RRGGBB. Det finns tvåsiffriga hexadecimala par för tre färger (röd, grön och blå) med värden från 00 till FF. Vi kan ställa in de gröna och röda färgerna med hjälp av HEX-värdet som visas nedan:

stroke="#00FF00"

fill="#FF0000"

• RGB (röd, blå, grön) färgkoder

Vi kan ange RGB-färgvärden som sträcker sig från 0 till 255. Vi kan ställa in de gröna och röda RGB-färgvärdena enligt nedan:

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

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

• RGBA (röd, blå, grön, alfa) färgkoder

RGBA-färgvärdena är RGB-färgvärden som förstärks av en alfakanal för att bestämma deras opacitet. Det är ett tal mellan 0,0 och 1,0 som anger transparens. Vi kan få de gröna och röda RGB-färgerna som visas nedan:

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

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

• HSL färgkoder

HSL står för Hue, Saturation och Lightness. Varje färg i HSL har en vinkel på RGB-färghjulet samt ett intensitets- och mättnadsvärde i procent. Vi kan få HSL-koder för gröna och röda färger enligt nedan:

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

fill="hsl(0, 100%, 50%)"

• HSLA (Hue, Saturation, Lightness, Alpha) färgkoder

Tillägg av alfakanalvärde i HSL-färgvärde gör det möjligt att specificera färgens opacitet. Vi kan få HSLA-koder för gröna och röda färger som visas nedan:

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

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

Fyll och stryk cirkeln i C#

Vi kan ställa in SVG-fyllnings- och SVG-sträckegenskaper för en cirkel genom att följa stegen nedan:

1. Först laddar du en befintlig SVG med SVGDocument-klassen.
2. Hämta sedan dokumentets rotelement.
3. Hitta sedan alla cirkelelement med metoden QuerySelectorAll() .
4. Efter det ställer du in fyllningsattributen för det valda SVGCircleElement.
5. Alternativt kan du ställa in streckattributen för det valda SVGCircleElement.
6. Slutligen, spara den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur man ställer in fyllning och linje för ett cirkelelement i SVG i C#.

// Det här kodexemplet visar hur man ställer in fyllnings- och streckattribut för ett cirkelelement i SVG i C#.
// Ladda en befintlig SVG-bild
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Hämta root SVG-elementet i dokumentet
var svgElement = document.RootElement;

// Hitta alla cirkelelement i g-element
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Få det första cirkelelementet
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Ställ in fyllningsattribut
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Ställ in strokeattribut
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

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

Nedan hittar du innehållet i Circle.svg-bilden.

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

Här kommer innehållet i Fill-Circle.svg-bilden.

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

Fyll och stryk väg i C#

Vi kan ställa in SVG-fyllnings- och SVG-sträckegenskaper för ett banelement i SVG genom att följa stegen nedan:

1. Först laddar du en befintlig SVG med SVGDocument-klassen.
2. Hämta sedan dokumentets rotelement.
3. Hämta sedan sökvägselementet med metoden QuerySelector().
4. Efter det ställer du in fyllningsattributen för det valda SVGPathElement.
5. Alternativt kan du ställa in streckattributen för det valda SVGPathElement.
6. Slutligen, spara den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur man ställer in fyllning och linje för ett sökvägselement i SVG i C#.

// Det här kodexemplet visar hur man ställer in fyllnings- och streckattribut för ett sökvägselement i SVG i C#.
// Ladda en befintlig SVG-bild
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Hämta root SVG-elementet i dokumentet
var svgElement = document.RootElement;

// Skaffa det första banelementet
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Ställ in fyllningsattribut
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Ställ in strokeattribut
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

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

Nedan hittar du innehållet i Sample-Path.svg-bilden.

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

Nedan hittar du innehållet i Fill-Path.svg-bilden.

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

Applicera SVG Fill och SVG Stroke med Style i C#

Vi kan också tillämpa egenskaperna SVG-fyllning och SVG-linje med CSS-stilattributet genom att följa stegen nedan:

1. Skapa först en instans av SVGDocument-klassen.
2. Hämta sedan dokumentets rotelement.
3. Skapa sedan ett cirkelelement med metoden CreateElementNS() .
4. Ställ sedan in cirkelns grundläggande egenskaper som Cx, Cy och R.
5. Använd sedan stilattributet med metoden SetAttribute().
6. Efter det lägger du till barnet med metoden AppendChild().
7. Slutligen, spara den utgående SVG-bilden med hjälp av metoden Save().

Följande kodexempel visar hur du applicerar SVG-fyllning och -linje med CSS-stilen i C#.

// Det här kodexemplet visar hur man applicerar fyllnings- och streckattributen med CSS-stilen i C#.
// Skapa en ny SVG
using (var document = new SVGDocument())
{
    // Hämta root SVG-elementet i dokumentet
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Lägg till cirkel
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Ställ in stilattribut
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Lägg till cirkel till rotelementet
    svgElement.AppendChild(circle);
    
    // Spara 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>

Få gratis tillfällig licens

Du kan få en gratis tillfällig licens för att prova Aspose.SVG för .NET utan utvärderingsbegränsningar.

Slutsats

I den här artikeln har vi lärt oss hur man:

• skapa en ny SVG-bild;
• ladda en befintlig SVG-bild;
• redigera en SVG-bild;
• ställ in fyllnings- och streckattribut för former av SVG;
• ställ in stilattribut för formerna i C#.

Dessutom kan du lära dig mer om Aspose.SVG för .NET i dokumentationen och utforska olika funktioner som stöds av API:et. I händelse av oklarheter, var god kontakta oss på vårt forum.

Se även

• Ändra SVG-färg eller bakgrund programmatiskt i C#