Question

我正在尝试手动缩小SVG。它使用两个相同但颜色相反的径向渐变。

<radialGradient id="a">
  <stop offset="0"  stop-color="#aadee8"/>
  <stop offset=".2" stop-color="#94d7e7"/>
  <stop offset=".5" stop-color="#6dcce9"/>
  <stop offset=".8" stop-color="#28b1e6"/>
  <stop offset="1"  stop-color="#27ace2"/>
</radialGradient>

<!-- Same colors, but opposite direction as #a -->
<radialGradient id="b">
  <stop offset="0"  stop-color="#27ace2"/>
  <stop offset=".2" stop-color="#28b1e6"/>
  <stop offset=".5" stop-color="#6dcce9"/>
  <stop offset=".8" stop-color="#94d7e7"/>
  <stop offset="1"  stop-color="#aadee8"/>
</radialGradient>

是否可以通过克隆a来创建反向副本？我已经尝试过<radialGradient xlink:href="#a" gradientTransform="scale(-1)" />，但没有成功。

Answer 1

spreadMethod有点诡异；它取决于仅在SVG 2中引入的fr属性的使用，因此兼容性可能是个问题。

这个想法是在外部半径之外定义颜色，然后定义颜色如何继续延伸。（百分比是相对于边界框的，因此默认情况下，r="50%"使外部半径适合如果cx位于框的边框。）

<svg width="200" height="100">
  <radialGradient id="a" r="100%" fr="50%">
    <stop offset="0"  stop-color="#aadee8"/>
    <stop offset=".2" stop-color="#94d7e7"/>
    <stop offset=".5" stop-color="#6dcce9"/>
    <stop offset=".8" stop-color="#28b1e6"/>
    <stop offset="1"  stop-color="#27ace2"/>
  </radialGradient>
  <radialGradient id="b" spreadMethod="repeat" xlink:href="#a" />
  <radialGradient id="c" spreadMethod="reflect" xlink:href="#a" />
  
  <circle r="50" cx="50" cy="50" fill="url(#b)" />
  <circle r="50" cx="150" cy="50" fill="url(#c)" />
</svg>

反向径向梯度

1 个答案: