SVG 中没有 defs 的线性渐变
我可以在带有 defs-section 的 SVG 中使用线性渐变，例如：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100"
style="fill:url(#myLinearGradient1)" />
</svg>
我可以在没有 defs-section 的情况下使用线性渐变吗？我发现这样的事情：
<rect style="fill:lineargradient(foo)">
I can use linear gradient in SVG with defs-section like:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100"
style="fill:url(#myLinearGradient1)" />
</svg>
Can I use linear gradient without defs-section? I find something like this:
<rect style="fill:lineargradient(foo)">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
但你仍然必须坚持正确的语法：
<defs>is only needed for structuring purposes, the elements in it are not displayed, but since a gradient can only be visible when applied to a shape or another element, you can define it in any place of the document.But you still have to stick to the correct syntax:
是的，您确实可以拥有渐变而无需 defs 元素；您只需将渐变元素放在代码中的其他位置即可，例如如下所示：
Yes you can indeed have a gradient without needing to have a defs element; you simply put the gradient element anywhere else in the code instead, for example like this: