css - CSS/SVG 中的停止颜色不起作用

Question

所以，我有以下代码:

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
<style>stop{stop-opacity:1}circle{fill:url(#r)}</style>
<defs>
<radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ce1126"/>
<stop offset="17%" style="stop-color:#e5911d"/>
<stop offset="33%" style="stop-color:#fcd116"/>
<stop offset="50%" style="stop-color:#18c063"/>
<stop offset="67%" style="stop-color:#75aadb"/>
<stop offset="83%" style="stop-color:#803ac5"/>
<stop offset="100%" style="stop-color:#00335b"/>
</radialGradient>
</defs>
<circle cx="150" cy="300" r="55"/>
</svg>

有趣的是，如果我将 stop-color:attr(c) 添加到停靠点的 CSS 并相应地更改它们 (style="stop-color:= >c=")，它不起作用(或者至少在 Safari/iOS9 中不起作用)。这是为什么？

Answer 1

有趣的是 Safari 不支持这个。这似乎在 Firefox 中有效:

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240">
  <style>
    stop {
      stop-opacity: 1
    }
    circle {
      fill: url(#r)
    }
  </style>
  <defs>
    <radialGradient id="r" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#ce1126" />
      <stop offset="17%" style="stop-color:#e5911d" />
      <stop offset="33%" style="stop-color:#fcd116" />
      <stop offset="50%" style="stop-color:#18c063" />
      <stop offset="67%" style="stop-color:#75aadb" />
      <stop offset="83%" style="stop-color:#803ac5" />
      <stop offset="100%" style="stop-color:#00335b" />
    </radialGradient>
  </defs>
  <circle cx="60" cy="100" r="55" fill="url(#r)" />
</svg>

我不推荐这样做。 最受支持的方式应该是:

• 添加停止色作为属性
• 向停止元素添加类或 ID，并使用 css 添加停止颜色。