Efecto de sombra paralela SVG C#

Las imágenes SVG son imágenes vectoriales amigables con la web que se pueden buscar, indexar, comprimir y codificar. Mientras que las sombras son una característica de diseño común que se utiliza para hacer que las imágenes sean estéticamente atractivas y prominentes. A veces, es posible que deba agregar un efecto de sombra paralela a una imagen SVG, como un icono o texto, etc. En consecuencia, este artículo explica cómo crear un efecto de sombra paralela en una imagen SVG mediante programación en C#.

Efecto de sombra paralela en la imagen SVG: descarga gratuita de la API de C#

Aspose.SVG para .NET admite el trabajo con imágenes SVG, ya que ofrece muchas funciones para editar, actualizar o convertir gráficos vectoriales escalables mediante programación en C#. Simplemente acceda a los archivos DLL de referencia desde la página Nuevas versiones, o ejecute el siguiente comando de NuGet para configurarlo desde la galería de NuGet, junto con todas las dependencias, si las hay.

PM> Install-Package Aspose.SVG

Cómo crear un efecto de sombra paralela en una imagen SVG en C#

Los siguientes pasos describen todo el proceso de agregar un efecto de sombra en una imagen SVG:

  1. Cree un objeto de la clase SVGDocument.
  2. Establezca la URL del espacio de nombres SVG y obtenga el elemento raíz SVG.
  3. Cree un elemento defs y un filterElement para agregar la primitiva de filtro feOffset.
  4. Cree un filtro feBlend y un elemento de texto.
  5. Guarde la imagen SVG de salida con el efecto Sombra paralela llamando al método Guardar.

Cree un efecto de sombra paralela en una imagen SVG mediante programación en C#

Siga los pasos a continuación para crear un efecto de sombra en la imagen SVG mediante programación en C#:

  1. Cree un objeto de la clase SVGDocument.
  2. Establezca la URL del espacio de nombres SVG y obtenga el elemento raíz SVG.
  3. Cree un elemento defs y un filterElement para agregar la primitiva de filtro feOffset.
  4. Cree un filtro feBlend y un elemento de texto.
  5. Guarde la imagen SVG de salida con un efecto Sombra paralela llamando al método Guardar.

El fragmento de código a continuación muestra cómo crear un efecto de sombra paralela en una imagen SVG en C#:

// Inicializar un objeto de la clase SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Establecer URL de espacio de nombres SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Obtenga el elemento svg raíz del documento
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Cree un elemento defs y agréguelo a svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Cree un elemento de filtro y agréguelo a defsElement
var filterElement = (Aspose.Svg.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);

// Cree una primitiva de filtro feOffset y agréguela a filterElement
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);

//// Crear una primitiva de filtro feGaussianBlur y agregarla a filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "desplazamiento";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("resultado", "desenfoque");
//filterElement.AppendChild(feGaussianBlurElement);

// Cree una primitiva de filtro feBlend y agréguela a filterElement
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);

// Cree un elemento de texto y agréguelo a svgElement
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);

// Guarde el documento SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Tenga en cuenta que algunas líneas de código están comentadas en el fragmento de código anterior. Puede optar por descomentarlo para aplicar el efecto de desenfoque gaussiano en la sombra si prefiere un efecto de sombra difuminada que hace que la salida se destaque con una sombra más suave.

Obtenga una Licencia Temporal Gratis

Puede solicitar una licencia temporal gratuita para probar la API a su máxima capacidad.

Conclusión

En este artículo, ha aprendido cómo crear un efecto de sombra paralela en una imagen SVG mediante programación en C#. Puede procesar una imagen SVG existente cargándola o crear una nueva imagen SVG desde cero, según sus requisitos. Además, puede visitar la sección documentación para conocer muchas otras características de la API. Si necesita discutir cualquier consulta o inquietud con nosotros, no dude en comunicarse con nosotros a través de foro.

Ver también