我正在学习svg，所以：
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
是渐变开始的地方（x1 =“0％”y1 =“0％”）e，其中渐变结束（x2 =“100％”y2 =“0％”）
但也
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
<stop offset="100%" style="stop-color:orange;stop-opacity:1" />
是渐变开始（第一个停止偏移）e，其中结束（第二个偏移）
不是吗？
我不明白有什么区别...... 也许差异在于有更多的colurs，因此定义开始和结束所有colurs与“stop offset”的位置很重要？
答案 0 :(得分：1)
<linearGradient>标记中的属性确定线性渐变线的起点和终点坐标。此处的百分比值是相对于应用渐变的形状的边界框。
x1="0%" y1="0%"表示左上角。
x2="100%" y2="0%"表示右上角。
因此，我们定义了一个水平线性渐变，从形状的LHS到RHS。
offset标记中的<stop>值指定了每个停止颜色开始的该行的位置。
所以，在你的例子中，
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
指定渐变在0％位置（左侧）为红色。
<stop offset="100%" style="stop-color:orange;stop-opacity:1" />
指定渐变在100％位置（右侧）为橙色。
所以最终结果是线性渐变，从左边的红色到右边的橙色。