Helpful resources ▼
  Download   Pricing   Buy

SVG 渐变 – SVG Gradients – SVG 代码和 C# 示例

SVG 渐变 – SVG Gradients

SVG 渐变允许您在 SVG 图形中的颜色或其他视觉属性之间创建平滑过渡。渐变被定义为在一个区域内逐渐混合颜色。它们用于实现各种视觉效果，例如阴影、高光等。 SVG 支持两种主要类型的渐变：线性渐变和径向渐变，它们由<linearGradient>和<radialGradient>SVG 元素定义。

<linearGradient> 或 <radialGradient> 元素必须嵌入到 <defs> 标记中以提高可重用性。 <defs> 元素通常用于定义渐变、图案、滤镜和其他可以多次引用的元素。 id 属性指定 SVG 渐变的唯一名称。文件内的其他元素可以引用它。渐变可应用于形状、文本等的“填充”或“描边”属性。

在本文中，您将学习如何在 SVG 代码中创建线性和径向渐变，并演练使用 Aspose.SVG for .NET 库实现 SVG 渐变的 C# 示例。

线性渐变

如何在 SVG 代码中创建线性渐变

线性渐变由<linearGradient>元素定义。线性渐变沿直线(渐变矢量)创建颜色之间的平滑过渡。线性梯度向量连接梯度停止点映射到的起点和终点。属性x1、y1、x2和y2设置线性梯度向量。它们的值可以是数字或百分比。

<linearGradient> 具有嵌套的子 <stop> 元素，用于控制渐变中使用的颜色。每种颜色都用stop-color属性指定。 <stop>元素的 offset属性指示渐变停止点的放置位置。对于线性梯度，它表示沿梯度向量的位置。

 1<svg xmlns="http://www.w3.org/2000/svg">
 2	<defs>
 3		<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
 4			<stop offset="10%" stop-color="#c71700" />
 5			<stop offset="60%" stop-color="orange" />
 6			<stop offset="100%" stop-color="#5a2100" />
 7		</linearGradient>
 8	</defs>
 9    <rect x="30" y="30" height="150" width="370" fill="url(#linear-gradient)" />
10</svg>

在上面的示例中，线性渐变id="linear-gradient"由 fill属性中的 <rect>元素引用。线性渐变内部有三个<stop>节点。在它们中的每一个中，offset属性设置 SVG 渐变获取stop-color值的位置。生成的 SVG 图像如下所示：

文本“用线性渐变填充的矩形”

线性渐变 – C# 示例

此 C# 示例创建一个 SVG 文件，其中的矩形填充了类似于我们之前看到的线性渐变。

  1. 使用 SVGDocument() 构造函数创建一个空的 SVG 文档。 SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
  2. 创建一个 <defs> 元素并将其添加到 <svg> 元素：
  3. 创建一个带有属性的 <linearGradient> 元素并将其添加到 <defs> 元素中：
    • 使用 CreateElementNS() 方法创建 SVGLinearGradientElement 类的实例。
    • 调用 SetAttribute(name, value) 方法设置 x1, y1, x2, 和 y2 属性。
    • 不要忘记设置 id属性。引用<linearGradient>中 id属性的 url 名称，允许应用 SVG 渐变来填充和描边形状或 SVG 文本。
    • 使用 AppendChild() 方法将 <linearGradient> 添加到 <defs> 元素。
  4. 创建 <stop> 元素，设置其属性，并将停止点添加到 <linearGradient> 元素：
    • 使用 CreateElementNS() 创建 SVGStopElement 类的实例。
    • 调用SetAttribute()方法设置offset和stop-color属性。
    • 使用 AppendChild() 方法将停止点添加到<linearGradient>元素。
  5. 创建一个将用线性渐变填充的矩形 <rect>元素。它被赋予一个 fill属性，该属性设置为url(#linear-gradient)，引用先前定义的 SVG 渐变，其中Id = "linear-gradient"。
  6. 调用 Save()方法将文档保存到path指定的本地文件中。
1using Aspose.Svg;
2using System.IO;
 1// Create an SVG linear gradient and apply it to a rectangle programmatically in C#
 2
 3// Set SVG Namespace Url
 4string SvgNamespace = "http://www.w3.org/2000/svg";
 5
 6// Initialize an SVG document
 7using (SVGDocument document = new SVGDocument())
 8{
 9    SVGSVGElement svgElement = document.RootElement;
10
11    // Create a <defs> element and add it to the <svg> element
12    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
13    svgElement.AppendChild(defsElement);
14
15    // Create a <linearGradient> element and add it to the <defs> element
16    SVGLinearGradientElement linearGradient = (SVGLinearGradientElement)document.CreateElementNS(SvgNamespace, "linearGradient");
17    linearGradient.Id = "linear-gradient";
18    linearGradient.X1.BaseVal.ValueAsString = "0%";
19    linearGradient.Y1.BaseVal.ValueAsString = "0%";
20    linearGradient.X2.BaseVal.ValueAsString = "100%";
21    linearGradient.Y2.BaseVal.ValueAsString = "0%";
22    defsElement.AppendChild(linearGradient);
23
24    // Add color stops to the gradient
25    SVGStopElement stop1 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
26    stop1.SetAttribute("offset", "10%");
27    stop1.SetAttribute("stop-color", "#c71700");
28    linearGradient.AppendChild(stop1);
29
30    SVGStopElement stop2 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
31    stop2.SetAttribute("offset", "70%");
32    stop2.SetAttribute("stop-color", "orange");
33    linearGradient.AppendChild(stop2);
34
35    SVGStopElement stop3 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
36    stop3.SetAttribute("offset", "100%");
37    stop3.SetAttribute("stop-color", "#5a2100");
38    linearGradient.AppendChild(stop3);
39
40    // Create a rectangle and apply the linear gradient
41    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
42    rectElement.X.BaseVal.Value = 30;
43    rectElement.Y.BaseVal.Value = 30;
44    rectElement.Width.BaseVal.Value = 370;
45    rectElement.Height.BaseVal.Value = 150;
46    rectElement.SetAttribute("fill", "url(#linear-gradient)");
47
48    // Append the rectangle to the SVG document
49    svgElement.AppendChild(rectElement);
50
51    // Save the document
52    document.Save(Path.Combine(OutputDir, "linear-gradient.svg"));
53}
Example-CreateLinearGradientSVG.cs hosted with ❤ by GitHub

生成的 linear-gradient.svg 文件看起来与上图完全相同 – 具有红橙棕色线性渐变的矩形。

径向渐变 – Radial Gradient

径向渐变在从中心点辐射的颜色之间创建平滑过渡。 <radialGradient>元素定义径向渐变及其属性。与线性渐变一样，<stop>元素定义沿径向渐变的颜色停止点。

如何在 SVG 代码中创建径向渐变

径向渐变比线性渐变更困难。颜色在其中循环变化而不是线性变化。径向渐变由<radialGradient>元素定义。

在此示例中，径向渐变的结束圆和起始圆的中心不匹配。

 1<svg xmlns="http://www.w3.org/2000/svg">
 2    <defs>
 3		<radialGradient id="radial-gradient" cx="0.5" cy="0.5" r="0.8" fx="25%" fy="25%" >
 4            <stop offset="10%" stop-color="chocolate" />
 5            <stop offset="30%" stop-color="silver" />
 6            <stop offset="60%" stop-color="chocolate" />
 7            <stop offset="90%" stop-color="maroon" />
 8        </radialGradient>
 9    </defs>
10    <g fill="url(#radial-gradient)">
11		<circle cx="100" cy="100" r="90" />
12		<rect x="570" y="10" height="130" width="200" />
13		<ellipse cx="300" cy="150" rx="150" ry="50" />
14		<ellipse cx="490" cy="140" rx="50" ry="130" />
15	</g>
16</svg>

文本“显示四个形状填充有径向渐变 – 一个圆形、两个椭圆形和一个矩形。”

如图所示，径向渐变的感知取决于它所应用的形状。径向渐变可以在圆形或椭圆形中创建令人信服的 3D 照明和深度幻觉。同时，我们在矩形中没有观察到这种效应。在这里，渐变在平面上给出了不同程度的视觉强调和照明效果。

径向渐变 – C# 示例

径向渐变创建从形状的中心点辐射到外边缘的平滑颜色过渡。以下 C# 代码片段展示了如何创建径向渐变。在此示例中，SVG 渐变最内边界和最外边界的中心相同，默认值为 0.5。让我们逐步考虑 C# 代码：

  1. 创建 SVGDocument 类的实例。 SVGDocument 类的 RootElement 属性指向文档的根 <svg>元素。
  2. 创建一个 <defs> 元素并将其添加到 <svg> 元素：
  3. 创建一个带有属性的<radialGradient>元素并将其添加到<defs>元素中：
    • 使用 CreateElementNS 方法创建 SVGRadialGradientElement 类的实例。
    • 调用 SetAttribute() 方法设置 x1, y1, x2, 和 y2 属性。
    • 不要忘记设置 id属性。引用<radialGradient>中 id属性的 url 名称，允许应用 SVG 渐变来填充和描边形状或 SVG 文本。
    • 使用 AppendChild() 方法将 <radialGradient> 添加到 <defs> 元素。
  4. 创建 <stop> 元素，设置其属性，并将停止点添加到 <radialGradient> 元素：
    • 使用 CreateElementNS() 创建 SVGStopElement 类的实例。
    • 调用SetAttribute()方法设置offset和stop-color属性。
    • 使用 AppendChild() 方法将停止点添加到<radialGradient>元素。
  5. 创建将用径向渐变填充的矩形 <rect>和<circle>元素。它有一个 fill属性，该属性设置为url(#RadialGradient)，引用先前定义的 SVG 渐变，其中Id="RadialGradient"。
  6. 调用 Save()方法将生成的SVG图像保存到路径指定的本地文件中。
1using Aspose.Svg;
2using System.IO;
 1// Create and apply a radial gradient to SVG shapes programmatically using Aspose.SVG
 2
 3// Set SVG Namespace Url
 4string SvgNamespace = "http://www.w3.org/2000/svg";
 5
 6// Initialize an SVG document
 7using (SVGDocument document = new SVGDocument())
 8{
 9    SVGSVGElement svgElement = document.RootElement;
10
11    // Create a <defs> element and add it to the <svg> element
12    SVGDefsElement defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
13    svgElement.AppendChild(defsElement);
14
15    // Create a <radialGradient> element and add it to the <defs> element
16    SVGRadialGradientElement radialGradient = (SVGRadialGradientElement)document.CreateElementNS(SvgNamespace, "radialGradient");
17    radialGradient.Id = "RadialGradient";
18    radialGradient.R.BaseVal.ValueAsString = "0.7";
19    defsElement.AppendChild(radialGradient);
20
21    // Add color stops to the radial gradient
22    SVGStopElement stop1 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
23    stop1.SetAttribute("offset", "0%");
24    stop1.SetAttribute("stop-color", "silver");
25    radialGradient.AppendChild(stop1);
26
27    SVGStopElement stop2 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
28    stop2.SetAttribute("offset", "55%");
29    stop2.SetAttribute("stop-color", "darkgreen");
30    radialGradient.AppendChild(stop2);
31
32    SVGStopElement stop3 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
33    stop3.SetAttribute("offset", "100%");
34    stop3.SetAttribute("stop-color", "black");
35    radialGradient.AppendChild(stop3);
36
37    // Create a rectangle and apply the radial gradient
38    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
39    rectElement.X.BaseVal.Value = 50;
40    rectElement.Y.BaseVal.Value = 50;
41    rectElement.Width.BaseVal.Value = 200;
42    rectElement.Height.BaseVal.Value = 150;
43    rectElement.SetAttribute("fill", "url(#RadialGradient)");
44
45    // Create a <circle> element and set its attributes
46    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
47    circleElement.Cx.BaseVal.Value = 520;
48    circleElement.Cy.BaseVal.Value = 125;
49    circleElement.R.BaseVal.Value = 90;
50    circleElement.SetAttribute("fill", "url(#RadialGradient)");
51
52    // Append the rectangle and circle to SVG
53    svgElement.AppendChild(rectElement);
54    svgElement.AppendChild(circleElement);
55
56    // Save the document
57    document.Save(Path.Combine(OutputDir, "radial-gradient.svg"));
58}
Example-RadialGradient.cs hosted with ❤ by GitHub

生成的图像 Radial-gradient.svg 如下所示。

文本“显示两个形状填充有径向渐变 – 圆形和矩形。”

如图所示，当径向渐变应用于圆形和矩形时，形状的感知有所不同。

也可以看看

SVG 滤镜 如何合并 SVG 文件
Close
Loading

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2026. All Rights Reserved.