SVG 中没有 defs 的线性渐变

Answer 1

<defs>

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

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

<rect style="fill:url(#myLinearGradient1)" ... />

---

如果对这是否有效有疑问，这里是问题中的确切代码，作为可执行堆栈片段：

<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>

/

<\defs>

:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <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>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

上述两个可执行代码片段都显示了预期的结果（至少在 chrome 和 firefox 中），这是一个填充有渐变的 100x100 矩形（绿色阴影垂直变化）：

Answer 2

是的，你确实可以拥有渐变而不需要 defs 元素；您只需将渐变元素放在代码中的其他位置即可，例如这样：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <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>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>