Как изменить цвет SVG – примеры C#

Aspose.SVG for .NET API позволяет редактировать документ SVG и вносить изменения в его содержимое. Использование цвета – важная часть создания SVG. Вы можете раскрасить фигуры SVG, линии, пути, текст. На примерах C# мы рассмотрим способы применения цветов в файлах SVG. В этой статье мы покажем, как работать с цветом SVG, используя библиотеку Aspose.SVG для .NET, и рассмотрим, как изменить цвет элементов SVG или цвет фона в файлах SVG.

Как добавлять новые элементы SVG и задавать свойства их цвета, мы подробно рассмотрели на примерах C# в статье Редактирование файлов SVG.

В статье Цвет SVG рассматривается, как можно раскрасить текст и фигуры SVG. Вы найдете обзор того, как определяется цвет, включая различные способы управления прозрачностью содержимого SVG.

Изменить цвет SVG

Заливка и обводка – это операции раскрашивания элементов SVG. Все графические элементы, такие как фигуры, контуры и текст, отображаются путем заливки. Заливка рисует внутреннюю часть объекта, а обводка – вдоль его контура. SVG stroke и fill – это некоторые из основных свойств CSS, которые можно установить для любых линий, текста и фигур. Дополнительную информацию о свойствах атрибутов стиля вы найдете в статье Заливка и обводка в SVG.

API Aspose.SVG позволяет изменять цвет различных элементов SVG в документе SVG. Сначала вы должны загрузить существующий документ SVG, а затем изменить цвет необходимого элемента SVG:

1. Используйте один из конструкторов SVGDocument() класса SVGDocument, чтобы загрузить существующий документ SVG.

2. Используйте QuerySelector(selector), чтобы найти нужный элемент в документе SVG. Метод QuerySelector(selector) класса Element позволяет получить первый элемент в документе, соответствующий указанному селектору. С получившимися элементами можно производить различные манипуляции: менять его атрибуты, стили CSS и так далее.

3. Используйте метод SetAttribute(name, value) класса Element, чтобы указать атрибуты элемента fill или stroke.

Цвет круга

Чтобы изменить цвет круга, необходимо выполнить несколько шагов:

• Откройте исходный файл SVG.
• Получить корневой элемент SVG документа.
• Получите элемент круга, чтобы изменить цвет.
• Установите новое значение атрибута fill или stroke для элемента круга.
• Сохраните документ SVG.

В следующем фрагменте кода показано, как изменить цвет круга для первого элемента круга SVG в файле basic-shapes.svg, показанном на рисунке (a) ниже:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

    // Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);
    
    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get circle element to change color
    var circleElement = svgElement.QuerySelector("circle") as SVGCircleElement;

    // Set a new "fill" attribute value for the circle element
    circleElement.SetAttribute("fill", "green"); 

	// Save the SVG document to a file
    document.Save(Path.Combine(OutputDir, "circle-color.svg"));

Цвет линии

Чтобы изменить цвет линии, вам следует выполнить аналогичные действия. В приведенном ниже примере C# показано, как изменить цвет линии для первого элемента линии SVG в файле Basic-shapes.svg:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

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

	// Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get line element to change color
    var lineElement = svgElement.QuerySelector("line") as SVGLineElement;

    // Set a new "stroke" attribute value for the line element
    lineElement.SetAttribute("stroke", "green");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "line-color.svg"));

На следующем рисунке показано исходное изображение (а) и изображения с изменениями цвета SVG для круга (b) и линии (c).

Атрибут fill задает цвет круга SVG (рис. b). В полученном файле circle-color.svg цвет круга меняется с красного (в оригинале) на зеленый. Атрибут stroke задает цвет линии SVG. В полученном файле line-color.svg (рис. c) цвет линии меняется с серого на зеленый. Аналогичным образом вы можете изменить цвет различных графических элементов SVG, таких как фигуры, контуры и текст, используя атрибут fill или stroke.

Изменить цвет фона

Чтобы установить цвет фона для изображения SVG, вам следует добавить новый элемент SVG, например круг или прямоугольник, в качестве первого дочернего элемента в документе SVG. Потому что правило порядка отображения элементов SVG таково: последующие элементы в коде отображаются поверх предыдущих.

В следующем фрагменте кода показано, как создать новый прямоугольник SVG в качестве фона для изображения SVG и раскрасить его:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

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

    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Create a rectangle element and set the "fill" attribute value to change background color
    var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 3;
    rectElement.Y.BaseVal.Value = 3;
    rectElement.Width.BaseVal.Value = 400;
    rectElement.Height.BaseVal.Value = 400;
    rectElement.SetAttribute("fill", "Salmon");

    // Add the rectangle element as the first child to svg element
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "change-background-color.svg"));

На рисунке показана визуализация исходного SVG-файла basic-shapes.svg и того же файла с добавленным цветом фона.

Перекрасить SVG

Давайте нарисуем снежинку! В следующем примере C# показано, как нарисовать снежинку SVG и перекрасить ее. Вы можете использовать этот подход для любого изображения SVG: измените цвет необходимого элемента SVG и измените цвет фона:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

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

    string documentPath = Path.Combine(DataDir, "snowflake-blue.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Create a circle element and set the "fill" attribute value to change background color
    var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 150F;
    circleElement.Cy.BaseVal.Value = 100F;
    circleElement.R.BaseVal.Value = 150F;
    circleElement.SetAttribute("fill", "#03b6fd");

    // Add the circle element (background) as the first child to svg element
    svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    // Get the first path element to change color
    var snowflakePath = svgElement.QuerySelector("path") as SVGPathElement;

    // Set a new "stroke" attribute value for the path element
    snowflakePath.SetAttribute("stroke", "white");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "recolor-svg.svg"));

На рисунке показана визуализация исходного SVG-файла snowflake-blue.svg и перекрашенного файла.

Конвертер цветов – это бесплатное онлайн-приложение для преобразования цветов между цветовыми форматами. Просто введите код цвета и сразу получите результат! Вам не нужно никакого дополнительного программного обеспечения. Попробуйте наш мощный конвертер цветов прямо сейчас!