Sombra paralela (Drop Shadow) – Filtros SVG – Código C#

Filtros SVG

Aspose.SVG for .NET le permite abrir, crear o editar un documento SVG y realizar cambios en su contenido. Puede aplicar muchos filtros SVG disponibles para elementos SVG o mapas de bits para obtener el resultado deseado. El espacio de nombres Aspose.Svg.Filters contiene clases e interfaces relacionadas con efectos de filtro en la especificación SVG. Para crear un efecto de sombra paralela, puede utilizar algunas primitivas de filtro:

• la clase SVGFEDropShadowElement para crear un elemento <feDropShadow> para implementar el efecto de sombra paralela;
• la clase SVGFEOffsetElement para crear un elemento <feOffset> para compensar una capa en SVG;
• la clase SVGFEGaussianBlurElement corresponde a un elemento <feGaussianBlur> para implementar el efecto Desenfoque Gaussiano;
• el SVGFEBlendElement para crear un elemento <feBlend> para combinar dos o más objetos.

En este artículo, aprenderá a escribir código SVG para crear un filtro de sombra paralela y considerará ejemplos detallados de C# sobre el uso del espacio de nombres Aspose.Svg.Filters para aplicar el efecto de sombra paralela a elementos SVG o mapas de bits.

Sombra paralela (Drop Shadow) – Código SVG

El efecto de sombra en SVG es un efecto visual común que se utiliza para crear la ilusión de una sombra detrás de un elemento SVG. Proporciona profundidad y realismo al contenido SVG al hacer que parezca que el elemento flota sobre el fondo. Además, se puede utilizar un efecto de sombra paralela para resaltar una imagen. Hay varias formas de implementar el efecto de sombra en SVG. Veamos dos de ellos.

Nota: En SVG, el filtro se define por el elemento <filter>, que se establece dentro de un elemento <defs>. Nunca se representa en sí mismo y se describe conceptualmente como el elemento que incluye a sus hijos: primitivos de filtro. El elemento <filter> tiene un conjunto de atributos. Los atributos requeridos para el filtro primitivo son x, y, width, height e id. Establecen el área de la imagen a la que se aplicará el filtro. Y el atributo id proporciona un identificador único a un elemento SVG e identifica un elemento dentro de un documento SVG.

Primitivas de filtro feOffset + feGaussianBlur + feBlend

En nuestra opinión, lo más efectivo es utilizar tres filtros para conseguir el efecto de sombra. Esto le permitirá ajustar el efecto aunque requiera más código:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
</svg>

Se utilizan tres filtros para crear un efecto de sombra paralela (figura c):

1. La primitiva de filtro <feOffset> se utiliza para compensar una capa en SVG. Toma in="SourceAlpha", desplaza el resultado 10 px hacia la derecha y 10 px hacia abajo, y almacena el resultado en el búfer como "offset". Tenga en cuenta que el canal alfa de la forma se utiliza como entrada. El valor SourceAlpha conduce a un resultado de color negro (figura a).
2. <feGaussianBlur> toma in="offset", aplica un desenfoque de stdDeviation="3" y almacena el resultado en un búfer temporal llamado "blur".
3. El filtro <feBlend> combina dos objetos; se necesitan dos entradas in="SourceGraphic" e in2="blur" y luego se combina el SourceGraphic encima de la imagen borrosa en negro desplazada (figura b). Su atributo mode especifica el modo de fusión.

La siguiente figura ilustra paso a paso la creación de la sombra paralela:

Primitiva de filtro feDropShadow

En SVG, el efecto de sombra se puede lograr usando la primitiva de filtro feDropShadow en el elemento <filter>. El elemento <feDropShadow> tiene los atributos necesarios para crear la sombra paralela, como dx, dy y stdDeviation, ¡además te permite agregar color y transparencia a la sombra paralela! Esto se logra utilizando los atributos flood-color y flood-opacity. Veamos cómo crear un efecto de sombra usando la primitiva de filtro feDropShadow:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
        <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
			<feDropShadow dx="10" dy="10" stdDeviation="3"  flood-color="CornflowerBlue" />
		</filter>
	</defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
</svg>

Nota: si el atributo “color de inundación” no se especifica o se especifica incorrectamente, la sombra predeterminada será negra.

Sombra paralela – Código C#

Aquí escribiremos el código С# para crear un efecto de sombra paralela para un rectángulo naranja usando tres primitivas de filtro.

El siguiente fragmento de código muestra cómo crear un efecto de sombra paralela utilizando Aspose.SVG for .NET API.

1. Utilice el constructor SVGDocument() para crear un documento SVG vacío.
2. La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento.
3. Cree un elemento <defs> y agréguelo al elemento <svg>:
   • Utilice el método CreateElementNS() para crear una instancia de la clase SVGDefsElement.
   • Utilice el método AppendChild() para agregar el elemento <defs> al elemento <svg>.
4. Cree un elemento <filter>, establezca atributos y agréguelo al elemento <defs>:
   • Utilice el método CreateElementNS() de la clase SVGDocument para crear una instancia de la clase SVGFilterElement.
   • Llame al método SetAttribute(name, value) para establecer los atributos x, y, height, y width.
   • No olvides establecer el atributo id.
   • Utilice el método AppendChild() para agregar el <filter> al elemento <defs>.
5. Cree un elemento <feOffset>, establezca atributos y agréguelo al elemento <filter>:
   • Utilice el método CreateElementNS() de la clase SVGDocument para crear una instancia de la clase SVGFEOffsetElement.
   • Llame al método SetAttribute() para establecer los atributos dx, dy y result.
   • No olvides configurar el atributo in1. Utilice la propiedad del tipo SVGAnimatedLength, cuyos datos estáticos se pueden configurar o leer a través de la construcción feOffsetElement.In1.BaseVal = "SourceAlpha".
   • Utilice el método AppendChild() para agregar <feOffset> al elemento <filter>.
6. De manera similar, cree, establezca atributos y agregue al elemento <filter> elementos como <feGaussianBlur> y <feBlend>.
7. Cree un elemento rectangular <rect> que será una forma SVG con un efecto de sombra paralela. Se le asigna un color de fill (#ffa500 – naranja) y el atributo filter se establece en "url(#shadow),", haciendo referencia al filtro previamente definido con Id = "shadow".
8. Llame al método Save() para guardar el documento con el filtro de sombra paralela en un archivo local especificado por la ruta.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Apply drop shadow effect for an SVG rectangle using C#

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feOffset> filter primitive and add it to the filterElement
    SVGFEOffsetElement feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
    feOffsetElement.In1.BaseVal = "SourceAlpha";
    feOffsetElement.SetAttribute("result", "offset");
    feOffsetElement.SetAttribute("dx", "10");
    feOffsetElement.SetAttribute("dy", "10");
    filterElement.AppendChild(feOffsetElement);

    // Create a <feGaussianBlur> filter primitive and add it to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "offset";
    feGaussianBlurElement.StdDeviationX.BaseVal = 3;
    feGaussianBlurElement.StdDeviationY.BaseVal = 3;
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a <feBlend> filter primitive and add it to the filterElement
    SVGFEBlendElement feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
    feBlendElement.In1.BaseVal = "SourceGraphic";
    feBlendElement.In2.BaseVal = "blur";
    feBlendElement.SetAttribute("mode", "normal");
    filterElement.AppendChild(feBlendElement);

    // Create a <rect> element and set the "fill" and "filter" attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 40;
    rectElement.Y.BaseVal.Value = 40;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "#ffa500");
    rectElement.SetAttribute("filter", "url(#shadow)");
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
}

Cuando ejecute este código C#, generará un archivo SVG con un efecto de sombra paralela para un rectángulo naranja. La sombra será de color negro, desplazada 10 unidades horizontalmente y 10 unidades verticalmente desde el rectángulo de origen. El archivo drop-shadow-effect.svg resultante se parece a la figura c: un rectángulo naranja con una sombra negra.

Efecto de sombra paralela utilizando la API SVG Builder

Aspose.SVG Builder API está diseñada para simplificar la creación y actualización de elementos SVG en C#. Veamos un ejemplo de С# para implementar el efecto de sombra paralela (exactamente el mismo ejemplo que en el párrafo anterior) usando SVG Builder API. Este código muestra el uso de un patrón de creación fluido para crear documentos SVG concisos y legibles, aprovechando las capacidades de la biblioteca Aspose.SVG:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create an SVG <rect> with drop shadow using SVG Builder in C#

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        //.Width(400).Height(400)
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(10).Dy(10)
                    .StdDeviation(3)
                )
            )
        )
        .AddRect(r => r
            .Rect(40, 40, 100, 100)
            .Filter(f => f.FilterId("shadow"))
            .Style(s => s.Fill(Color.Orange))
        )
        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    //.Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
}

El patrón de creación fluido le permite crear elementos SVG y aplicar filtros de una manera más concisa y legible. Cada llamada a un método, como .AddFilter() o .AddRect(), establece claramente su propósito, lo que le permite comprender la estructura del documento SVG de un vistazo. Este ejemplo demuestra un enfoque más expresivo para crear documentos SVG usando SVG Builder, proporcionando legibilidad, mantenibilidad y flexibilidad mejoradas en comparación con el enfoque manual de creación de elementos que se muestra en el ejemplo anterior. Como resultado de la ejecución del código, obtenemos el mismo rectángulo naranja con una sombra negra:

Sombra paralela de texto

Este ejemplo de C# crea un archivo SVG similar al que vimos anteriormente en la sección primitiva de filtro feDropShadow. Solo que aquí usamos la primitiva de filtro feDropShadow para crear una sombra de color para un texto SVG, no para el rectángulo naranja.

El siguiente fragmento de código muestra cómo crear una sombra de texto usando Aspose.SVG for .NET API:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;

// Add a colored drop shadow effect to <text> in SVG programmatically

// Set SVG Namespace Url
string SvgNamespace = "http://www.w3.org/2000/svg";

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create a <defs> element and add it to the svgElement
    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
    svgElement.AppendChild(defsElement);

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "text-shadow";
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "150px");
    filterElement.SetAttribute("width", "150px");
    defsElement.AppendChild(filterElement);

    // Create a <feDropShadow> filter primitive and add it to the filterElement
    SVGFEDropShadowElement feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
    feDropShadowElement.StdDeviationX.BaseVal = 3;
    feDropShadowElement.StdDeviationY.BaseVal = 3;
    feDropShadowElement.SetAttribute("dx", "3");
    feDropShadowElement.SetAttribute("dy", "3");
    feDropShadowElement.SetAttribute("flood-color", "LightCoral");
    filterElement.AppendChild(feDropShadowElement);

    // Create a <text> element and add it to the svgElement
    SVGTextElement textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
    textElement.Style.FontSize = "4em";
    textElement.SetAttribute("x", "20px");
    textElement.SetAttribute("fill", "CornflowerBlue");
    textElement.SetAttribute("y", "100px");
    textElement.TextContent = "Drop Shadow Effect";
    textElement.SetAttribute("filter", "url(#text-shadow)");
    svgElement.InsertBefore(textElement, svgElement.FirstChild);

    // Save the document
    document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
}

Sombra paralela de texto: uso de SVG Builder

Exactamente el mismo ejemplo para texto con una sombra de color, pero lo implementamos usando Aspose.SVG Builder:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Add a colored drop shadow effect to <text> in SVG using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .AddDefs(d => d
            .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                .AddFeDropShadow(sh => sh
                    .Dx(3).Dy(3)
                    .StdDeviation(3)
                    .FloodColor(Color.LightCoral)
                )
            )
        )
        .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
            .Filter(f => f.FilterId("shadow"))
            .AddContent("Drop Shadow Effect")
        )

        // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
}

Las imágenes resultantes text-drop-shadow.svg y text-drop-shadow-builder.svg se ven así:

El texto tiene una sombra paralela con un color de relleno LightCoral y un radio de desenfoque de 3 unidades. La sombra se compensará 3 unidades horizontalmente y 3 unidades verticalmente desde el texto, creando un efecto de sombra paralela visualmente atractivo.

Ver también

• Más información sobre las primitivas de filtro, consulte el W3C Filter Effects Module.
• Si se pregunta cómo escribir código SVG para crear filtros SVG, desenfoque gaussiano, efectos de sombra, efectos de iluminación o degradado lineal y degradado radial, visite el artículo Filtros y degradados SVG.
• Puede descargar los ejemplos completos y los archivos de datos desde GitHub.
• Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.