svg渐变（说明和演示）

马黑黑

本帖示例代码，红色数值可以在线修改。

一、线性渐变 linearGradient

linearGradient各属性的数值取值范围在0~1之间（可用百分比），它们用来改变渐变的方向；stop标签用来指定参与渐变的颜色以及颜色的表现形态：属性stop-color指明颜色，属性offset设定颜色开始与结束位置（一般用百分比），stop-opacity设置颜色的透明度（0~1之间）。

<svg width="200" height="100">
	<defs>
		<linearGradient id="lGradient" x1="0" y1="0" x2="0" y2="1">
			<stop offset="0%" stop-color="red" stop-opacity="1" />
			<stop offset="100%" stop-color="green" stop-opacity="1" />
		</linearGradient>
	</defs>

	<rect x="0" y="0" width="100%" height="100%" fill="url(#lGradient)" />
</svg>

【说明】linearGradient 渐变方向

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

二、放射性渐变 radialGradient

radialGradient标签用来设定放射性渐变（也称径向渐变），cx和cy属性定义放射中心点、r 定义放射半径（一般用50%），fx和fy属性定义渐变焦点（通常都设为50%）。stop标签与前面介绍线性渐变 linearGradient 时说明的一样。

<svg width="200" height="100">
	<defs>
		<radialGradient id="rGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
			<stop offset="0%" stop-color="red" stop-opacity="1" />
			<stop offset="100%" stop-color="green" stop-opacity="1" />
		</radialGradient>
	</defs>

	<ellipse cx="100" cy="50" rx="95" ry="45" fill="url(#rGradient)" />
</svg>

马黑黑

醉美水芙蓉 发表于 2023-11-12 12:15
给黑黑老师点个赞！老师辛苦了！

下午好

冬天的雨

欣赏马老师的黑科技

冬天的雨

svg渐变==路径渐变 ？

不可想象啊，还可以这样

马黑黑

冬天的雨 发表于 2023-11-12 13:30
svg渐变==路径渐变 ？

不可想象啊，还可以这样

不同的概念

樵歌

创造性发明。真和冬雨说的一样，果然黑科技牛叉

马黑黑

樵歌 发表于 2023-11-12 18:26
创造性发明。真和冬雨说的一样，果然黑科技牛叉

svg是一种文本标记图形文件，基于浏览器而开发的产品，和网页同源，二者的区别是，svg针对图形，传统web网页（HTML）针对文本（主要）。HTML和svg是兄弟，HTML是老大，图文并茂，功能齐全；svg是老二，专攻图形（用标记性语言描述图形）。HTML的父亲还有一个私生子，叫 canvas，画布，也是专攻图形，基于像素的，我怀疑它的母亲是 JavaScript，因为 canvas 的全部操作只能由 JavaScript 发号施令。

@小辣椒
@红影

小辣椒

马黑黑 发表于 2023-11-12 19:24
svg是一种文本标记图形文件，基于浏览器而开发的产品，和网页同源，二者的区别是，svg针对图形，传统web ...

来了，黑黑晚上好

小辣椒

马黑黑 发表于 2023-11-12 19:24
svg是一种文本标记图形文件，基于浏览器而开发的产品，和网页同源，二者的区别是，svg针对图形，传统web ...

黑黑这个很通俗 形象的介绍，小辣椒可以看明白一点了

小辣椒

因为没有系统的跟着学习，我网络搜索了一下，大概的意思，这里黑黑解释的比较清楚了

千羽

来欣赏黑黑老师的精彩

马黑黑

千羽 发表于 2023-11-12 20:29
来欣赏黑黑老师的精彩

马黑黑

小辣椒 发表于 2023-11-12 20:09
来了，黑黑晚上好

马黑黑

小辣椒 发表于 2023-11-12 20:13
因为没有系统的跟着学习，我网络搜索了一下，大概的意思，这里黑黑解释的比较清楚了

红影

用x1y1x2y2来表示渐变方向这个挺难懂，因为它不仅可以取0和1，还能取小数。

这就导致了会跟stop offset=的取值相互干涉，我取了y2=".5" stop offset="50%" stop-color="green"
会让颜色分布发生了累加作用，感觉很难控制得准确。

马黑黑

红影 发表于 2023-11-13 13:37
用x1y1x2y2来表示渐变方向这个挺难懂，因为它不仅可以取0和1，还能取小数。

这就导致了会跟stop offset= ...

取值是百分比，百分比有两种表示方法：0~1，x%。

xy是坐标，x代表水平方向，y代表垂直方向。工科女理解这个不应是问题。

樵歌

马黑黑 发表于 2023-11-12 19:24
svg是一种文本标记图形文件，基于浏览器而开发的产品，和网页同源，二者的区别是，svg针对图形，传统web ...

道可道非常道！牛！

马黑黑

樵歌 发表于 2023-11-13 19:52
道可道非常道！牛！

红影

马黑黑 发表于 2023-11-13 19:01
取值是百分比，百分比有两种表示方法：0~1，x%。

xy是坐标，x代表水平方向，y代表垂直方向。工科女理 ...

这个不难，我想说的和是下一个offset相互影响啊。