请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2025-9-23 12:22 编辑
SVG渐变用于直线类元素，假若直线为水平线或垂直线，渐变将失效，线条将无法显示。原因在于线条没有实际性厚度，解决方法就是给线条添加厚度。这里所说的厚度本质上指线条在占位空间层面上，① 水平线在Y轴上，② 垂直线在X轴上，头尾两端的Y、X坐标值不能相等，即，y1≠y2，x1≠x2，满足此条件，渐变才会生效。但此时，直线已经不是严格意义上的水平线、垂直线，不过当我们给极小差距的值，渲染效果肉眼看不出来。试看如下演示：
<svg width="400" height="400">
<defs>
<linearGradient id="lGrd">
<stop offset="0" stop-color="plum" />
<stop offset="0.5" stop-color="purple" />
<stop offset="1" stop-color="plum" />
</linearGradient>
</defs>
<!-- 圆 ：演示渐变样式 -->
<circle cx="200" cy="200" r="100" fill="url(#lGrd)" />
<!-- 水平线 ：避免 y1 = y2 -->
<line x1="40" y1="380" x2="390" y2="380.01" stroke="url(#lGrd)" stroke-width="8" />
<!-- 垂直线 ：避免x1 = x2 -->
<line x1="20" y1="20" x2="20.01" y2="380" stroke="url(#lGrd)" stroke-width="8" />
</svg>
以上是到目前止最好的解决方案，该方案网上找不到。网上介绍的处理方法是给渐变设置 gradientUnits 属性，属性值设为 userSpaceOnUse，我测试不出效果。DS则认为是线条的线帽样式属性 stroke-linecap 缺省值 butt 拦截了渐变，设置 stroke-linecap="round" 可以解决问题，此法我也测试不出效果。
| 
发表于 2025-9-23 12:20
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-9-23 13:44
发表于 2025-9-23 19:42
