SVG中没有defs的线性渐变答案

【问题标题】：Linear gradients in SVG without defsSVG中没有defs的线性渐变
【发布时间】：2011-09-30 17:56:49
【问题描述】：

我可以在带有 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)">

【问题讨论】：

我也在尝试在纯 CSS 中定义渐变，而不必在每个 SVG 文件中定义它。最重要的是没有 id 标签，因为当 SVG 在页面上多次出现（例如图标）时，冲突的 id 不是唯一的，它不是有效的 HTML。到目前为止，我还没有找到解决方案...

标签： svg gradient linear-gradients

【解决方案1】：

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

但你还是要坚持正确的语法：

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

【讨论】：

这个答案没有回答问题。如果不在 defs 标签中定义渐变，是否可以使用渐变。
@func0der 对你来说，答案可以读作“是的，因为...”
它不起作用。至少对我来说不是。使用 style 属性和 css “linear-gradient” 什么也没给我。因此，如果您可以在答案中添加一个工作示例，那就太好了，因为您的答案表明它有效，就像 OP 所建议的那样。
@func0der 问题是关于 SVG <linearGradient>，而不是 CSS linear-gradient(...)，示例就在问题本身中。
没有“lineargradient” svg 函数。正如您在您正在谈论的示例中看到的那样，他使用“样式”属性使其成为css“线性渐变”。要点是：它不起作用

【解决方案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>

【讨论】：

尽管您的示例在 linearGradient 元素周围没有，但它确实没有回答问题。目标是能够在 CSS 中定义渐变，而不必在每个 SVG 文件中定义它。最大的问题之一是，如果您在一个页面（例如图标）上多次使用 SVG，并且多次出现相同的 id，则不是有效的 HTML。