svg：简单画一个玉手镯
<div class="hE"><pre id="sCode"><svg width="400" height="400" viewBox="-200 -200 400 400">
<defs>
<linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#008000" />
<stop offset="0.5" stop-color="#00ffcc" />
<stop offset="1" stop-color="#ffcc00" />
</linearGradient>
<filter id="shadow">
<feOffset dx="4" dy="4" />
<feGaussianBlur stdDeviation="2" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
<feComposite in="SourceGraphic" />
</filter>
</defs>
<circle cx="0" cy="0" r="160" fill="none" stroke-width="30" stroke="url(#grd)"filter="url(#shadow)" />
</svg>
</pre></div>
<p><button id="btnShow" type="button" value="show">查看效果</button></p>
<div id="sBox"></div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
btnShow.onclick = () => {
sBox.innerHTML = sCode.innerText;
btnShow.disabled = true;
}
</script>
defs标签封装了一个线性渐变和一个复合滤镜。圆使用渐变描边，使用滤镜略作修饰。
滤镜一是偏移滤镜，dx、dy表示水平、垂直两个方向的偏移；
滤镜二是高斯模糊，模糊参数为2，数值越大就越模糊；
滤镜三是颜色矩阵换算，这里用来设置阴影的颜色（基本保持原品颜色结构）；
滤镜四是将前面的滤镜整合起来，作用于原始图像。 可以尝试拿掉滤镜，比较一下效果。方法是拿掉15行代码的 filter="url(#shadow)" 出品的都是高侈级别，漂亮极了，这得是玻璃种的帝王绿。。 马黑黑 发表于 2024-9-22 18:36
可以尝试拿掉滤镜，比较一下效果。方法是拿掉15行代码的 filter="url(#shadow)"
拿掉后，边缘比较硬，有滤镜比较柔和。。也比较立体。。 花飞飞 发表于 2024-9-22 19:55
拿掉后，边缘比较硬，有滤镜比较柔和。。也比较立体。。
还可以调节一下偏移滤镜和模糊滤镜值 花飞飞 发表于 2024-9-22 19:54
出品的都是高侈级别，漂亮极了，这得是玻璃种的帝王绿。。
严重言重了
<svg width="400" height="400" viewBox="-200 -200 400 400">
<defs>
<linearGradient id="grd" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#008000" />
<stop offset="0.25" stop-color="#00FA9A" />
<stop offset="0.5" stop-color="#00ffcc" />
<stop offset="0.8" stop-color="#00FF00" />
<stop offset="1" stop-color="#ffcc00" />
</linearGradient>
<filter id="shadow">
<feOffset dx="4" dy="4" />
<feGaussianBlur stdDeviation="6" />
<feColorMatrix type="matrix" values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.3 0" />
<feComposite in="SourceGraphic" />
</filter>
</defs>
<circle cx="0" cy="0" r="150" fill="none" stroke-width="36" stroke="url(#grd)" filter="url(#shadow)"/>
</svg> 马黑黑 发表于 2024-9-22 20:13
还可以调节一下偏移滤镜和模糊滤镜值
刚才就在试着调整。。{:4_173:}色彩过渡不自然没办法 马黑黑 发表于 2024-9-22 20:13
严重言重了
就是好看呀，这怎么看都好看。{:4_173:} 花飞飞 发表于 2024-9-22 20:15
挺不错的。其实还可以调整渐变：x1，x2，y1，y2 取值在 0~1 之间，它们达成的是渐变的方向和覆盖范围；stop可以加更多的颜色，每一个颜色一个 stop 标签，offset 取值在 0~1 之间。 花飞飞 发表于 2024-9-22 20:18
就是好看呀，这怎么看都好看。
不过这个设计的有点大了 花飞飞 发表于 2024-9-22 20:17
刚才就在试着调整。。色彩过渡不自然没办法
来来去去就是0和1之间的组合 马黑黑 发表于 2024-9-22 20:19
挺不错的。其实还可以调整渐变：x1，x2，y1，y2 取值在 0~1 之间，它们达成的是渐变的方向和覆盖范围；st ...
方向改了一下，黄色的在边上了。。
颜色也添加了两种{:4_170:}相近似的
就是颜色之间感觉有硬边
这个同页代码不受影响？ 马黑黑 发表于 2024-9-22 20:20
不过这个设计的有点大了
{:4_173:}我拿我的跟屏幕上比划一下，是大那么一圈 马黑黑 发表于 2024-9-22 20:20
来来去去就是0和1之间的组合
还有色彩要近似吧，选临近色 马黑黑 发表于 2024-9-22 18:36
可以尝试拿掉滤镜，比较一下效果。方法是拿掉15行代码的 filter="url(#shadow)"
还是有滤镜看着更柔和些{:4_187:} 线性渐变加复合滤镜就可以做出手镯，手镯工厂有危机了{:4_173:} 这个很漂亮，也可顺便感受一下滤镜的效果{:4_187:} 代码做玉手镯，可以以假乱真，漂亮