css - 单击 HTML 页面上的按钮后渐变填充 SVG

Question

是否可以在页面上单击按钮后使用渐变色填充 SVG？我在这里阅读了很多文章，但没有一篇对我有帮助。我只需要 css 中的渐变颜色(最佳选择)。

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

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

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

了解更多详情 http://www.w3schools.com/svg/svg_grad_linear.asp