元素停止缺少 SVG 线性渐变填充所需的属性偏移

Question

W3 验证抛出以下错误：-

Element stop is missing required attribute offset

关于这段代码：-

<!--  Defining Angle Gradient Colors  -->
<svg width="0" height="0">
<defs>
<!-- Colours red #ca3b37 gold #f0a635 blue #4fc4f6 green #0FBD46-->
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#ca3b37"/>
<stop offset="100%" stop-color="#ca3b37"/>
</linearGradient>
<linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#ca3b37"/>
<stop offset="100%" stop-color="#f0a635"/>
</linearGradient>
<linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop stop-color="#f0a635"/>
<stop offset="100%" stop-color="#4fc4f6"/>
</linearGradient>
<linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop stop-color="#4fc4f6"/>
<stop offset="100%" stop-color="#4fc4f6"/>
</linearGradient>
<linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop stop-color="#4fc4f6"/>
<stop offset="100%" stop-color="#0FBD46"/>
</linearGradient>
<linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop stop-color="#0FBD46"/>
<stop offset="100%" stop-color="#0FBD46"/>
</linearGradient>
</defs>
</svg>

谁能告诉我缺少的属性是什么/它是如何应用的。

谢谢

格兰尼男孩

Answer 1

在您的示例中，有些停止元素具有偏移属性，有些则没有。您需要为所有没有的属性添加偏移量属性。

<stop stop-color="#ca3b37"/>
<stop offset="100%" stop-color="#ca3b37"/>

变成

<stop offset="<some value you need to decide on>" stop-color="#ca3b37"/>
<stop offset="100%" stop-color="#ca3b37"/>

将 <您需要决定的某些值> 替换为一个值，也许是 0。

元素停止缺少 SVG 线性渐变填充所需的属性偏移

Element stop is missing required attribute offset on SVG Linear Gradient Fill

svg

gradient

offset