SVG中的椭圆渐变答案

【问题标题】：Elliptical gradient in SVGSVG中的椭圆渐变
【发布时间】：2014-01-07 18:14:29
【问题描述】：

有没有办法在 SVG 中制作椭圆渐变？

我尝试了下面建议的代码，但它只显示一个红色椭圆，而不是渐变：

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
 "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%" 
    xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" >

  <defs>
    <radialGradient id="gradientDefinition"
      gradientUnits="userSpaceOnUse">
      <stop stop-color="yellow" offset="0%" />
      <stop stop-color="red" offset="100%" />
    </radialGradient>
  </defs>

  <ellipse cx="250" cy="150" rx="200" ry="100" stroke="white"
    stroke-width="1" stroke-dasharray="1 1 1 1"
    style="fill:url(#gradientDefinition)" />
</svg>

我想要一个椭圆渐变，而不是椭圆内的圆形渐变。

【问题讨论】：

您使用的是哪个浏览器？（当 running 这个在 Chrome 中我可以看到图像中的渐变......）
@summea 我已经在 Firefox 和 Inkscape 中尝试过。
评论中的链接适用于 Firefox。
很抱歉误读了您原帖的最后一行； this 怎么样（即如果你取出 gradientUnits="userSpaceOnUse" 属性/值会发生什么？）虽然，它可能仍然只是一个圆形渐变......如果是这样，请道歉。
@summea 去掉那个参数后看起来更椭圆了，所以也许这就是关键。

标签： web graphics svg gradient ellipse

【解决方案1】：

总结之前的发现，似乎从<radialGradient> 标签中删除gradientUnits="userSpaceOnUse" attribute 和 value 对允许径向渐变变为 (或至少看起来变成）椭圆形。此外，将stop-opacity 属性和值添加到每个<stop> 标签可以更容易看到椭圆渐变效果（至少用于演示目的。）

以下是进行了上述更改的代码：

<defs>
    <radialGradient id="gradientDefinition" >
        <stop stop-color="yellow" offset="0%" stop-opacity="0" />
        <stop stop-color="red" offset="100%" stop-opacity="1" />
    </radialGradient>
</defs>

显示此代码似乎可以工作：

见： elliptical radialGradient vs circular radialGradient

还有一个tutorial online 似乎为类似的椭圆梯度方法提供了类似的行为，该教程的结果可以在此jsFiddle 中找到。

注意：如果此方法不适用于您的目的，可能还有其他更好的方法（可能与 gradient transformations 或类似的东西有关......）

【讨论】：