SVG 渐变（linearGradient、radialGradient）

2024-02-20 17:30
文章标签 svg 渐变 lineargradient radialgradient

本文主要是介绍SVG 渐变（linearGradient、radialGradient），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

渐变简介

渐变是一种从一种颜色到另一种颜色的平滑过渡。
在SVG中，有两种主要的渐变类型：

  • 线性渐变（linearGradient）
  • 放射性渐变（radialGradient）

SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素。

linearGradient（线性渐变）

  • （x1，y1）到（x2，y2）的连线是线性渐变的径向。
  • 渐变径向起点之前的为最小offset的stop-color的纯色。
  • 渐变径向终点之后的为最大offset的stop-color的纯色。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><linearGradient id="linearGradient_x1_1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><linearGradient id="linearGradient_x1_2" x1="50%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><linearGradient id="linearGradient_x1_3" x1="100%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><linearGradient id="linearGradient_x2_1" x1="0%" y1="0%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><linearGradient id="linearGradient_x2_2" x1="0%" y1="0%" x2="50%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><linearGradient id="linearGradient_x2_3" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><ellipse cx="120" cy="80"  rx="100" ry="50" style="fill:url(#linearGradient_x1_1)" /><ellipse cx="350" cy="80"  rx="100" ry="50" style="fill:url(#linearGradient_x1_2)" /><ellipse cx="580" cy="80"  rx="100" ry="50" style="fill:url(#linearGradient_x1_3)" /><ellipse cx="120" cy="200" rx="100" ry="50" style="fill:url(#linearGradient_x2_1)" /><ellipse cx="350" cy="200" rx="100" ry="50" style="fill:url(#linearGradient_x2_2)" /><ellipse cx="580" cy="200" rx="100" ry="50" style="fill:url(#linearGradient_x2_3)" /><path d="M70,20 v250 M120,20 v250 M170,20 v250 M300,20 v250 M350,20 v250 M400,20 v250 M530,20 v250 M580,20 v250 M630,20 v250" stroke="blue" stroke-width="2" />
</svg>

这里写图片描述

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200" ><linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/></linearGradient><text x="10" y="30" font-size="30px" fill="url(#linearGradient)">跟我一起学SVG</text>
</svg>

这里写图片描述

radialGradient（放射性渐变）

  • <stop> 标签定义了梯度停点（渐变点）
    • offset 表示梯度值，0%是最上层（最内侧），100%是最下层（最外层）
  • （cx，cy）为最下层（最外层）
  • （fx，fy）为最上层（最内层）渐变中心点
  • r 为最内层和最外层（最上层和最下层）渐变半径
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><radialGradient id="radialGradient_r1" cx="50%" cy="50%" r="0%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_r2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_r3" cx="50%" cy="50%" r="100%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_c1" cx="0%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_c2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_c3" cx="100%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_f1" cx="50%" cy="50%" r="50%" fx="0%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_f2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><radialGradient id="radialGradient_f3" cx="50%" cy="50%" r="50%" fx="100%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><ellipse cx="120" cy="80"  rx="100" ry="50" style="fill:url(#radialGradient_r1)" /><ellipse cx="350" cy="80"  rx="100" ry="50" style="fill:url(#radialGradient_r2)" /><ellipse cx="580" cy="80"  rx="100" ry="50" style="fill:url(#radialGradient_r3)" /><ellipse cx="120" cy="200" rx="100" ry="50" style="fill:url(#radialGradient_c1)" /><ellipse cx="350" cy="200" rx="100" ry="50" style="fill:url(#radialGradient_c2)" /><ellipse cx="580" cy="200" rx="100" ry="50" style="fill:url(#radialGradient_c3)" /><ellipse cx="120" cy="320" rx="100" ry="50" style="fill:url(#radialGradient_f1)" /><ellipse cx="350" cy="320" rx="100" ry="50" style="fill:url(#radialGradient_f2)" /><ellipse cx="580" cy="320" rx="100" ry="50" style="fill:url(#radialGradient_f3)" /><path d="M70,20 v380 M120,20 v380 M170,20 v380 M300,20 v380 M350,20 v380 M400,20 v380 M530,20 v380 M580,20 v380 M630,20 v380" stroke="red" stroke-width="2" />
</svg>

这里写图片描述

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200" ><radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="50%" style="stop-color:green;stop-opacity:0.5" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient><text x="10" y="30" font-size="30px" fill="url(#radialGradient)">跟我一起学SVG</text>
</svg>

这里写图片描述

这篇关于SVG 渐变（linearGradient、radialGradient）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/728985。

相关文章

渐变颜色填充

渐变颜色填充

GradientFill函数可以对特定的矩形区域或者三角形区域进行渐变颜色的填充。我们先来看看GradientFill函数到底长得什么样子，帅不帅。 [cpp]  view plain copy print ? BOOL GradientFill(     _In_  HDC hdc,     _In_  PTRIVERTEX pVertex,     _In_  ULONG
阅读更多...
C#中的各种画刷， PathGradientBrush、线性渐变（LinearGradientBrush）和径向渐变的区别

C#中的各种画刷， PathGradientBrush、线性渐变（LinearGradientBrush）和径向渐变的区别

在C#中，画刷（Brush）是用来填充图形（如形状或文本）内部区域的对象。在.NET框架中，画刷是System.Drawing命名空间的一部分，通常用于GDI+绘图操作。以下是一些常用的画刷类型： SolidBrush：用于创建单色填充的画刷。HatchBrush：用于创建具有图案填充的画刷。TextureBrush：用于创建具有图像纹理填充的画刷。LinearGradientBrush：用于创
阅读更多...
(4)SVG-path中的椭圆弧A(绝对)或a(相对)

(4)SVG-path中的椭圆弧A(绝对)或a(相对)

1、概念 表示经过起始点(即上一条命令的结束点)，到结束点之间画一段椭圆弧 2、7个参数 rx，ry，x-axis-rotation，large-arc-flag，sweep-flag，x，y （1）和（2）rx，ry rx：椭圆的x轴半径(即水平半径) ry：椭圆的y轴半径(即垂直半径) 这两个参数好理解，就是椭圆的两条对称轴半径，相等即为圆 也可以写比例，写比例时默认用符合条件
阅读更多...
svg无功补偿装置脉冲封锁怎么解除

svg无功补偿装置脉冲封锁怎么解除

SVG（Static Var Generator，静态无功发生器）脉冲封锁是一种保护机制，用于防止装置在异常情况下继续运行，从而避免对电力系统造成进一步的损害。如果SVG进入脉冲封锁状态，通常需要执行特定的步骤来解除封锁并恢复正常运行。以下是解除SVG脉冲封锁的一般步骤： 1. 检查故障原因 故障诊断：首先，查看SVG的故障记录或报警信息，确定导致脉冲封锁的具体原因。常见的原因包括过电流、过电
阅读更多...
【CSS渐变】背景中的百分比：深入理解`linear-gradient`，进度条填充

【CSS渐变】背景中的百分比：深入理解`linear-gradient`，进度条填充

在现代网页设计中，CSS渐变是一种非常流行的视觉效果，它为网页背景或元素添加了深度和动态感。linear-gradient函数是实现线性渐变的关键工具，它允许我们创建从一种颜色平滑过渡到另一种颜色的视觉效果。在本篇博客中，我们将深入探讨linear-gradient函数中的百分比值，特别是像#C3002F 50%, #e8e8e8 0这样的用法，以及它们如何影响渐变效果。 什么是linear-g
阅读更多...
svg/webvowl 流程图创建

svg/webvowl 流程图创建

项目链接：https://code.csdn.net/u013372487/webvowl/tree/master
阅读更多...
wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化

wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化

前言 上一篇文章介绍了 wsksvg 插件的开发思路和灵感，而本篇则详细阐述了 wsksvg 扩展功能，以及技术的介绍。通过 wsksvg 插件，开发者可以高效地优化 PNG、JPG、JPEG、WEBP 和 GIF 图像，同时对 SVG 文件进行深入处理，包括优化、生成 Vue 和 React 组件以及转换为 Base64 编码格式。这些功能不仅简化了图像管理流程，也提升了应用的性能和用户体验。
阅读更多...
SVG精髓-svg开发指南

SVG精髓-svg开发指南

SVG精髓 目录 文章目录 前言推荐阅读1. 入门1. 图形系统1. 栅格系统2. 矢量图形 2. `SVG`作用1. 文档结构2. `circle`3. 指定样式 - `fill, stroke`4. 线 - `line`5. 变换坐标系统 - `use, transform, scale`6. 折线 - `polyline`7. `path`8. `text` 2. 网页中使用`SVG
阅读更多...
推荐适合中秋的SVG模版（第III期）

推荐适合中秋的SVG模版（第III期）

宝藏模版 往期推荐（点击阅读）： 趣味效果｜高大上｜可爱风｜年终总结I｜年终总结II｜循环特效｜情人节I｜情人节II｜妇女节｜儿童节I｜儿童节II｜儿童节III｜618I｜618II｜父亲节｜丝滑动画｜端午节I｜端午节II｜滑动妙用｜图片轮播I｜图片轮播II｜又红又专｜中秋节I｜中秋节II｜双十一I｜双十一II｜世界杯｜圣诞节｜新年｜兔年春节｜元宵节｜愚人节｜杂志范儿｜520/521I｜520
阅读更多...
JPG转SVG,分享便捷的转换方法

JPG转SVG,分享便捷的转换方法

JPG转SVG,JPG格式是一种常用的位图格式，适用于照片和复杂图像，而SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，适用于标志、图标和图形设计。相比于位图，矢量图形具有无限缩放而不失真的优点，因此在许多应用场景中更为合适。为了帮助你轻松完成这一任务，小编将为你介绍四种便捷的将JPG转换为SVG的方法。 一、使用迅捷图片转换器 迅捷图片转换器是一
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2