草庐IT

SVG 渐变 - 线性

runoob 2023-04-07 原文

SVG 渐变 - 线性


SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。

SVG渐变主要有两种类型:

  • Linear
  • Radial

SVG 线性渐变 - <linearGradient>

<linearGradient>元素用于定义线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义。

线性渐变可以定义为水平,垂直或角渐变:

  • 当y1和y2相等,而x1和x2不同时,可创建水平渐变
  • 当x1和x2相等,而y1和y2不同时,可创建垂直渐变
  • 当x1和x2不同,且y1和y2不同时,可创建角形渐变

实例 1

定义水平线性渐变从黄色到红色的椭圆形:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" 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> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg>

尝试一下 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。

代码解析:

  • <linearGradient>标签的id属性可为渐变定义一个唯一的名称
  • <linearGradient>标签的X1,X2,Y1,Y2属性定义渐变开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
  • 填充属性把 ellipse 元素链接到此渐变

实例 2

定义一个垂直线性渐变从黄色到红色的椭圆形:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> <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> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg>

尝试一下 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。


实例 3

定义一个椭圆形,水平线性渐变从黄色到红色并添加一个椭圆内文本:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1" 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> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86"> SVG</text> </svg>

尝试一下 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。

代码解析:

  • <text> 元素是用来添加一个文本

有关SVG 渐变 - 线性的更多相关文章

  1. ruby - 在 Ruby 中将 SVG 转换为 PNG - 2

    我需要在RoR应用程序中将SVG内容转换为光栅图像(最好是PNG)。是否有不涉及ImageMagick的直接方法,或者这是事实上的标准? 最佳答案 通常,ImageMagick被认为是事实上的标准。到目前为止,它已经与多种语言相关联,使用起来应该不会很麻烦。ruby绑定(bind)似乎被称为rmagick。也就是说,您当然可以自己加载和渲染SVG,也许使用librsvg的ruby​​绑定(bind)(尽管从未成功使用过),并使用ruby​​-libpng将其存储为png。什么是RoR应用?

  2. python - 在 Ruby 或 Python 中解析 SVG 的库 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭6年前。ImprovethisquestionSVG是一个庞大的标准,它基于XML。我过去曾将SVG解析为XML。然而,有些事情很难。例如,我想知道一个组的大小。据我所知,这只有通过递归遍历组中的所有子项(注意它们的所有转换)并累积它们的大小才有可能。我很想拥有一个可以为我做类似事情的图书馆。有这样的东西吗?

  3. 线性代数让我想想:快速求三阶矩阵的逆矩阵 - 2

    快速求三阶矩阵的逆矩阵前言一般情况下,我们求解伴随矩阵是要注意符号问题和位置问题的(如下所示)A−1=1[  ][−[  ]−[  ]−[  ]  −[  ]]=A−1=1[  ][   M11−[M12]   M13−[M21]   M22−[M23]     M31−[M32]   M33]⊤\begin{aligned}&A^{-1}=\frac{1}{[\\]}\left[\begin{array}{cccccc}&-[\\]&\\-[\\]&&-[\\]\\\\&-[\\]&\\\end{array}\right]=\\\\&A^{-1}=\frac{1}{[\\]}\left[\b

  4. ruby-on-rails - Raphael 中的 SVG 文件,可以使用吗? - 2

    我有一个SVG文件,我想通过Raphael显示(每个svg文件都是我要绘制的树中的一个节点,树的实际连接将由raphael建立)。我试过类似的东西:varvector_image=paper.image("test.svg",50,50,50,50);但没有骰子,似乎只接受像png或jpeg这样的“真实”图像文件?我觉得这很奇怪,因为拉斐尔本身使用可缩放矢量图形。无论如何(除了将SVG文件解析为javascript片段并将它们粘贴到html文档中)使用Raphael(或任何其他基于矢量的javascript图形引擎?)显示现有的SVG文件?如果必须解析它,除了手动抓取文件之外,是否有任

  5. 用于进行线性或非线性最小二乘近似的 Ruby 库? - 2

    是否有Ruby库允许我对一组数据进行线性或非线性最小二乘法逼近。我想做的是:给定一系列[x,y]数据点针对该数据生成线性或非线性最小二乘法近似值库不必弄清楚它是否需要进行线性或非线性近似。库的调用者应该知道他们需要什么类型的回归我不想尝试移植某些C/C++/Java库来获得此功能,因此我希望有一些现有的Ruby库可供我使用。 最佳答案 尝试使用“statsample”gem。您可以使用下面提供的示例执行对数、指数、幂或任何其他转换。我希望这有帮助。require'statsample'#IndependentVariablex_da

  6. 图形学-变换(平移矩阵,旋转矩阵,缩放矩阵,线性变换,仿射变换,齐次坐标) - 2

    1.变换1.1什么是变换?变换(Transform)是计算机图形学中非常重要的一部分。变换包含模型变换(Modelingtransform)以及视图变换(Viewtransform)。模型变换指的是变换模型(被拍摄物体)的位置,大小和角度;视图变换指的是变换照相机的位置和角度。从相对运动的角度来看,两种变换是可以相互转化的。1.2模型变换1.2.1二维变换缩放变换缩放变换(Scale)中,如果一个图片以原点(0,0)为中心缩放𝑠倍。那么点(𝑥,𝑦)变换后数学形式可以表示为写成矩阵形式为:当然,我们也可以给x轴和y轴不同的缩放倍数𝑠𝑥和𝑠𝑦。在非均匀情况下,缩放变换的矩阵形式为反射变换反射变换(

  7. 数据结构笔记NO.1(绪论、线性表、栈队列和矩阵的压缩存储) - 2

    第一章、绪论1、数据结构三要素:逻辑结构、存储结构(物理结构)、数据的运算。(1)逻辑结构:是指数据元素之间的逻辑关系,即从逻辑关系上描述数据,它与数据的存储无关,是独立于计算机的。(2)存储结构(物理结构):是指数据在计算机中的表示(又称映像),是用计算机语言实现的逻辑结构,它依赖于计算机语言。顺序存储:把逻辑上相邻的元素存储在物理位置上也相邻的存储单元中,元素之间的关系由存储单元的邻接关系来体现(e.g.数组)。优点:①可以实现随机存取;②每个元素占用最少的存储空间;缺点:只能使用相邻的一整块存储单元,因此可能产生较多的外部碎片;链式存储:不要求逻辑上相邻的元素在物理位置上也相邻,借助指示

  8. ruby - 在 Ruby 中创建一个线性嵌套哈希? (我来自 Perl) - 2

    我是一个Perl的人,我已经做了一段时间这样的哈希:my%date;#Assumethescalarsarecalledwith'my'earlier$date{$month}{$day}{$hours}{$min}{$sec}++现在我正在学习Ruby,到目前为止我发现使用这棵树是做很多键和一个值的方法。有什么方法可以只用一行来使用我在Perl中使用的简单格式吗?@date={month=>{day=>{hours=>{min=>{sec=>1}}}}} 最佳答案 不幸的是,没有简单实用的方法。一个Ruby等价物将是一个丑陋、丑陋

  9. 基于线性矩阵不等式LMI的鲁棒H无穷控制算法设计,多性能指标的H无穷控制算法推导,多面体模型 - 2

    catalogue关键字一些符号和特殊表示预备知识正文(一)不确定系统的数学表示(二)线性时不变定常系统的LMI稳定性定理(判据)2.1系统模型2.2当u=w=0时系统的LMI稳定性判据2.3.当u=0,w!=0时的保H无穷性能定理(三)多面体模型表示的不确定系统在不同工况下的稳定性定理3.1不确定系统模型的多面体表达式3.2参数无关的鲁棒状态反馈控制率:u=kx3.2.1闭环系统鲁棒稳定性3.2.2闭环系统鲁棒稳定性、保H无穷性能3.3参数相关的鲁棒状态反馈控制率:u=ai*ki*x3.3.1.状态反馈控制下的闭环系统鲁棒稳定性定理(w=0)3.3.2.状态反馈控制下的保H无穷性能、闭环系统

  10. javascript - SVG feOffset 过滤器放大/缩放 - 2

    为了在svg多边形或圆上有两个笔划和模糊,我创建了一个滤镜来执行此操作,尽管第二个“笔划”(使用滤镜创建)被剪裁或不像一个完美的圆。知道如何以正确的方式解决这个问题吗? 最佳答案 feMorphology在执行扩张时使用方形搜索框,因此它将创建这些裁剪效果。另一种扩大形状并保留原始形状的方法是进行高斯模糊,然后使用feComposite/feFuncA/table将模糊区域转换为完全不透明的形状。像这样: 关于javascript-SVGfeOffset过滤器放大/缩放,我们在Stack

随机推荐