Preencha e trace em SVG usando C #

SVG (Scalable Vector Graphics) é um formato de arquivo vetorial amigável baseado em XML. Ele é usado para exibir informações visuais em uma página da web. As imagens SVG são escaláveis sem alterar a qualidade da imagem. Neste artigo, aprenderemos como trabalhar com preenchimento e traçado em SVG usando C#.

Os seguintes tópicos serão abordados neste artigo:

1. API C# para preencher e traçar em SVG
2. O que é preenchimento SVG
3. O que é SVG Stroke
4. Traços e preenchimentos em SVG
5. Preencher e traçar círculo em SVG
6. Fill and Stroke Path in SVG
7. Aplicar preenchimento e traçado usando estilo

API C# para preencher e traçar em SVG

Para trabalhar com atributos de preenchimento e traçado de SVG em C#, usaremos a API Aspose.SVG para .NET. Ele permite carregar, analisar, renderizar, criar e converter arquivos SVG para formatos populares sem nenhuma dependência de software.

A classe SVGDocument da API representa a raiz da hierarquia SVG e contém todo o conteúdo. O método Save() desta classe permite salvar SVG no caminho de arquivo especificado. O método QuerySelector() retorna o primeiro elemento no documento que corresponde ao seletor. A API suporta o trabalho com formas populares, como retângulos, círculos, elipses, Linha, polilinhas etc. A API fornece classes separadas para representar essas formas suportadas, como SVGCircleElement para círculo, SVGPolygonElement para polígono etc.

Por favor, faça o download da DLL da API ou instale-a usando NuGet.

PM> Install-Package Aspose.SVG

O que é o preenchimento SVG?

A propriedade de preenchimento é um dos atributos básicos de apresentação SVG usados para definir a cor da forma dentro de seu contorno.

Podemos definir os seguintes atributos de preenchimento:

• preenchimento: define a cor a ser preenchida. Especifique nenhum ou transparente se não houver preenchimento.
• fill-opacity: Define o valor da opacidade entre 0 e 1.
• regra de preenchimento: define como a área interna de uma forma é determinada, como diferente de zero, par ímpar.

O que é SVG Stroke?

A propriedade stroke define o contorno ou uma borda das formas SVG. O atributo de apresentação do traço define a cor do contorno da forma.

Podemos definir os seguintes atributos de traço:

• traço: define o valor da cor.
• stroke-dasharray: especifica os tipos de linha tracejada.
• deslocamento-traço
• stroke-linecap: Controla a forma das extremidades das linhas, como bumbum, quadrado e redondo.
• stroke-linejoin: especifica como duas linhas se unem, como mitra, bisel e arredondada.
• stroke-miterlimit: Deve ser maior ou igual a 1 se usado.
• stroke-opacity: define o valor de opacidade entre 0 e 1.
• largura do traço: define a largura.

Preenchimentos e traços em SVG

Tanto o preenchimento quanto o traçado são usados para adicionar cores, gradientes ou padrões a gráficos em SVG. O preenchimento pinta o interior do elemento SVG, enquanto o traço pinta seu contorno. Podemos especificar preenchimento e traçado no atributo de estilo ou usá-los como atributos de apresentação.

Podemos definir preenchimentos SVG e traçados SVG no atributo style como mostrado abaixo:

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

Também podemos usar as mesmas propriedades de estilo nos atributos de apresentação, conforme mostrado abaixo:

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

Para especificar a cor SVG, podemos usar nomes de cores como vermelho, azul, etc. Também podemos usar valores RGB ou valores HEX para as cores.

Preencher e traçar círculo em C#

Podemos definir as propriedades de preenchimento SVG e traçado SVG para um círculo seguindo as etapas abaixo:

1. Primeiramente, carregue um SVG existente usando a classe SVGDocument.
2. Em seguida, obtenha o elemento raiz do documento.
3. Em seguida, encontre todos os elementos do círculo usando o método QuerySelectorAll().
4. Depois disso, defina os atributos de preenchimento para o SVGCircleElement selecionado.
5. Opcionalmente, defina os atributos de traçado para o SVGCircleElement selecionado.
6. Por fim, salve a imagem SVG de saída usando o método Save().

O exemplo de código a seguir mostra como definir preenchimento e traçado para um elemento de círculo de SVG em C#.

// Este exemplo de código demonstra como definir atributos de preenchimento e traçado para um elemento de círculo de SVG em C#.
// Carregar uma imagem SVG existente
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Obter elemento SVG raiz do documento
var svgElement = document.RootElement;

// Encontre todos os elementos do círculo no elemento g
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Obtenha o primeiro elemento do círculo
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Definir atributos de preenchimento
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Definir atributos de traçado
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

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

Veja abaixo o conteúdo da imagem 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>

Aqui vai o conteúdo da imagem 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>

Caminho de preenchimento e traçado em C#

Podemos definir as propriedades de preenchimento SVG e traçado SVG para um elemento de caminho no SVG seguindo as etapas abaixo:

1. Primeiramente, carregue um SVG existente usando a classe SVGDocument.
2. Em seguida, obtenha o elemento raiz do documento.
3. Em seguida, obtenha o elemento path usando o método QuerySelector().
4. Depois disso, defina os atributos de preenchimento para o SVGPathElement selecionado.
5. Opcionalmente, defina os atributos de traçado para o SVGPathElement selecionado.
6. Por fim, salve a imagem SVG de saída usando o método Save().

O exemplo de código a seguir mostra como definir preenchimento e traçado para um elemento de caminho de SVG em C#.

// Este exemplo de código demonstra como definir atributos de preenchimento e traçado para um elemento de caminho de SVG em C#.
// Carregar uma imagem SVG existente
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Obter elemento SVG raiz do documento
var svgElement = document.RootElement;

// Obter o primeiro elemento de caminho
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Definir atributos de preenchimento
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Definir atributos de traçado
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

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

Veja abaixo o conteúdo da imagem 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>

Veja abaixo o conteúdo da imagem 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>

Aplicar preenchimento e traçado usando estilo em C#

Também podemos aplicar as propriedades de preenchimento SVG e traçado SVG usando o atributo de estilo CSS seguindo as etapas abaixo:

1. Primeiramente, crie uma instância da classe SVGDocument.
2. Em seguida, obtenha o elemento raiz do documento.
3. Em seguida, crie um elemento circle usando o método CreateElementNS().
4. Em seguida, defina as propriedades básicas do círculo, como Cx, Cy e R.
5. Em seguida, aplique o atributo style usando o método SetAttribute().
6. Depois disso, anexe o filho usando o método AppendChild().
7. Por fim, salve a imagem SVG de saída usando o método Save().

O exemplo de código a seguir mostra como aplicar o preenchimento e o traço usando o estilo CSS em C#.

// Este exemplo de código demonstra como aplicar os atributos de preenchimento e traçado usando o estilo CSS em C#.
// Criar um novo SVG
using (var document = new SVGDocument())
{
    // Obter elemento SVG raiz do documento
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Adicionar círculo
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Definir atributo de estilo
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Adicionar círculo ao elemento raiz
    svgElement.AppendChild(circle);
    
    // Salve o 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>

Obtenha Licença Temporária Gratuita

Você pode obter uma licença temporária gratuita para experimentar o Aspose.SVG para .NET sem limitações de avaliação.

Conclusão

Neste artigo, aprendemos como:

• crie uma nova imagem SVG;
• carregar uma imagem SVG existente;
• editar uma imagem SVG;
• definir atributos de preenchimento e traçado para formas de SVG;
• defina atributos de estilo para as formas em C#.

Além disso, você pode aprender mais sobre Aspose.SVG para .NET na documentação e explorar diferentes recursos suportados pela API. Em caso de qualquer ambiguidade, não hesite em contactar-nos no nosso fórum.

Veja também

• Alterar cor ou plano de fundo do SVG programaticamente em C #