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: =＆gt; c="），它就不起作用（或者至少不行在Safari / iOS9中）。这是为什么？

Answer 1

有趣的是，Safari不支持此功能。这似乎适用于Firefox：

＆＃13;

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

＆＃13;

我不会建议以这种方式这样做。最受支持的方式应该是：

添加停止颜色作为属性
向stop元素添加一个类或id，并使用css添加一个停止颜色。

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

1 个答案: