没有defs的SVG中的线性渐变

And*_*hin 10 svg gradient linear-gradients

我可以在SVG中使用线性渐变,其中defs-section如:

<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>
Run Code Online (Sandbox Code Playgroud)

我可以使用没有defs-section的线性渐变吗?我发现这样的事情:

<rect style="fill:lineargradient(foo)">
Run Code Online (Sandbox Code Playgroud)

Spa*_*hut 6

<defs> 仅用于结构目的,其中的元素不会显示,但由于渐变仅在应用于形状或其他元素时才可见,因此您可以在文档的任何位置定义它。

但是你仍然必须坚持正确的语法:

<rect style="fill:url(#myLinearGradient1)" ... />
Run Code Online (Sandbox Code Playgroud)

  • 这个答案没有回答问题。如果不在 defs 标签中定义渐变,是否可以使用渐变? (4认同)