SVG 渐变必须在 <defs> 标签中进行定义。
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外,可以把多个颜色的过渡应用到同一个元素上。
在 SVG 中,有两种主要的渐变类型:
- 线性渐变
- 放射性渐变
线性渐变
<linearGradient> 可用来定义 SVG 的线性渐变。
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写,它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变:
- 当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变
- 当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变
- 当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变
请把下面的代码拷贝到记事本,然后把文件保存为 "linear1.svg"。把此文件放入您的 web 目录:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="orange_red" 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="190" rx="85" ry="55" style="fill:url(#orange_red)"/> </svg>
代码解释:
- <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
- fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
- <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
- 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
另一个例子:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="orange_red" 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="190" rx="85" ry="55" style="fill:url(#orange_red)"/> </svg>
相关推荐
20220714 SVG自定义折线图——票房趋势.zip
html5基于svg绘制多边形组合的菱形背景动画特效。彩色的渐变背景动效
SVG环形渐变
SVG格式转成PDF——Java工程 保证可以用 文档中的bar和bubble是我进行测试的svg文件。该工程也可以将多个pdf合并成一个pdf
SVG学习教程.doc SVG学习教程 svg 学习 教程
HTML5 SVG渐变填充文本特效.zip
这是一款HTML5 SVG图形变化制作炫酷渐变动画特效。该特效开始时使用多层SVG图形来制作一些渐变图案。当用户点击菜单时,相应颜色的渐变图案会放大为全屏,效果非常炫酷。
SVG动画线性渐变[iOS + Android] 此组件将所有SVG组件的动画线性渐变作为子道具。 您可以将此组件用作加载组件,例如Facebook或Instagram,用于任何svg组。 该组件正在使用 ,如果您不想使用expo,请随意分叉此repo...
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料
教你如何在网页中通过javascript控制SVG图片
模板分析——SVG黑科技互动排版『左右滑动』模板代码
将.svg图标转换为.mif图标的小工具... 命令格式: mifconv 目标文件名.mif 源文件名.svg
svg基础学习,svg基础语法,svg初学者必备教程,欢迎下载
HTML5 SVG图像渐变淡入淡出动画,很四、五种SVG动画效果,从一个图形的建立到绘制完成的整个过程都以动画的形式展示出来,HTML5的SVG都有不错的表现,代替了FLASH动画的效果,而且资源占用率较低,打开源码包后,可...
SVG学习资料,SVG相关软件汇总找资料
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
世界所有国家的国旗 SVG 图标 共266国家 1X1和 4x3 格式 文件命名为 国家缩写 (ad.svg)
svg转png, svg文件渲染, 使用plutosvg库