反向径向梯度

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; 它取决于fr仅在SVG 2中引入的属性的使用,因此兼容性可能是个问题.

我们的想法是定义预期外半径之外的颜色,然后定义它是如何继续进行的.(百分比是相对于边界框的,因此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>