svg渐变（说明和演示）
<style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.bblue { color: blue; }
.zs { color: green; }
.editNum { padding: 2px 4px; color: red; }
.ma pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.ma svg { border: 1px solid gray; }
.flex { display: flex; gap: 8px; align-items: center; }
</style>
<div class="ma">
<p>本帖示例代码，红色数值可以在线修改。</p>
<h2>一、线性渐变 linearGradient</h2>
<p>linearGradient各属性的数值取值范围在0~1之间（可用百分比），它们用来改变渐变的方向；stop标签用来指定参与渐变的颜色以及颜色的表现形态：属性stop-color指明颜色，属性offset设定颜色开始与结束位置（一般用百分比），stop-opacity设置颜色的透明度（0~1之间）。</p>
<pre id="lgCode">
<svg width="200" height="100">
<defs>
<linearGradient id="lGradient" x1="<span class="editNum">0</span>" y1="<span class="editNum">0</span>" x2="<span class="editNum">0</span>" y2="<span class="editNum">1</span>">
<stop offset="<span class="editNum">0%</span>" stop-color="red" stop-opacity="<span class="editNum">1</span>" />
<stop offset="<span class="editNum">100%</span>" stop-color="green" stop-opacity="<span class="editNum">1</span>" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#lGradient)" />
</svg>
</pre>
<p><input type="button" id="btn1" value="修改完毕" /></p>
<p id="lgStage">
<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>
</p>
<p>【说明】linearGradient 渐变方向</p>
<pre>
当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变
</pre>
<h2>二、放射性渐变 radialGradient</h2>
<p>radialGradient标签用来设定放射性渐变（也称径向渐变），cx和cy属性定义放射中心点、r 定义放射半径（一般用50%），fx和fy属性定义渐变焦点（通常都设为50%）。stop标签与前面介绍线性渐变 linearGradient 时说明的一样。</p>
<pre id="rgCode">
<svg width="200" height="100">
<defs>
<radialGradient id="rGradient" cx="<span class="editNum">50%"</span> cy="<span class="editNum">50%</span>" r="<span class="editNum">50%</span>" fx="<span class="editNum">50%</span>" fy="<span class="editNum">50%</span>">
<stop offset="<span class="editNum">0%</span>" stop-color="red" stop-opacity="<span class="editNum">1</span>" />
<stop offset="<span class="editNum">100%</span>" stop-color="green" stop-opacity="<span class="editNum">1</span>" />
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="95" ry="45" fill="url(#rGradient)" />
</svg>
</pre>
<p><input type="button" id="btn2" value="修改完毕" /></p>
<p id="rgStage">
<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>
</p>
</div>
<script>
let editNum = document.querySelectorAll('.editNum');
editNum.forEach((item) => item.setAttribute('contentEditable','true'));
btn1.onclick = () => lgStage.innerHTML = lgCode.innerText;
btn2.onclick = () => rgStage.innerHTML = rgCode.innerText;
</script>
醉美水芙蓉 发表于 2023-11-12 12:15
给黑黑老师点个赞！老师辛苦了！
下午好 欣赏马老师的黑科技{:4_178:} svg渐变==路径渐变 ？
不可想象啊，还可以这样 冬天的雨 发表于 2023-11-12 13:30
svg渐变==路径渐变 ？
不可想象啊，还可以这样
不同的概念 创造性发明。真和冬雨说的一样，果然黑科技牛叉{:4_431:} 樵歌 发表于 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 ...
来了，黑黑晚上好{:4_187:} 马黑黑 发表于 2023-11-12 19:24
svg是一种文本标记图形文件，基于浏览器而开发的产品，和网页同源，二者的区别是，svg针对图形，传统web ...
黑黑这个很通俗 形象的介绍，小辣椒可以看明白一点了 因为没有系统的跟着学习，我网络搜索了一下，大概的意思，这里黑黑解释的比较清楚了{:4_199:} 来欣赏黑黑老师的精彩{:4_187:} 千羽 发表于 2023-11-12 20:29
来欣赏黑黑老师的精彩
{:4_190:} 小辣椒 发表于 2023-11-12 20:09
来了，黑黑晚上好
{:5_108:} 小辣椒 发表于 2023-11-12 20:13
因为没有系统的跟着学习，我网络搜索了一下，大概的意思，这里黑黑解释的比较清楚了
{:4_190:} 用x1y1x2y2来表示渐变方向这个挺难懂，因为它不仅可以取0和1，还能取小数。
这就导致了会跟stop offset=的取值相互干涉，我取了y2=".5" stop offset="50%" stop-color="green"
会让颜色分布发生了累加作用，感觉很难控制得准确。{:4_204:} 红影 发表于 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
道可道非常道！牛！
{:4_172:} 马黑黑 发表于 2023-11-13 19:01
取值是百分比，百分比有两种表示方法：0~1，x%。
xy是坐标，x代表水平方向，y代表垂直方向。工科女理 ...
这个不难，我想说的和是下一个offset相互影响啊。
页:
[1]
2