按钮单击 HTML 页面后渐变填充 SVG

【问题标题】：Gradient fill SVG after button click on HTML page按钮单击 HTML 页面后渐变填充 SVG
【发布时间】：2015-06-23 09:37:04
【问题描述】：

在页面上单击按钮后，是否可以通过渐变颜色填充 SVG？我在这里读了很多文章，但没有一个对我有帮助。我只需要 css 中的渐变颜色（最好的选择）。

这是我需要申请“金属色”的示例 - http://web-stranky.org/pro_dementa/

如果有任何帮助，我将不胜感激。

【问题讨论】：

我不相信你可以使用 CSS 渐变来填充 SVG。
只是使语法化并与这一切都发生在 html 页面上的概念联系起来。

标签： css svg colors fill

【解决方案1】：

Svg 尚不支持 CSS3 渐变属性，虽然您可以通过在 svg 中定义渐变并使用 fill 属性在 svg 中填充渐变来填充 svg 中的渐变。

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

【讨论】：

谢谢。我希望这会对我有所帮助。