SVG - 与形状坐标无关的线性渐变答案

【问题标题】：SVG - Linear Gradient independent of the shape coordinatesSVG - 与形状坐标无关的线性渐变
【发布时间】：2014-04-08 12:41:43
【问题描述】：

我想用线性渐变绘制一个 svg 形状，就像为背景绘制的渐变一样。所以在下面的示例图像中，它看起来应该像我只绘制蓝色椭圆描边。我不能只画蓝色笔划的原因是椭圆在我的具体应用程序中移动到其他对象上方，并且在蓝色笔划内不应该有任何对象，但它应该看起来像背景......使用常规定义的渐变椭圆是根据椭圆的形状计算的，并且与背景的渐变不同...谢谢

<svg height="400" width="800" >
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
    <ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
    <ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
</svg>

【问题讨论】：

您希望它看起来好像是透明的 (fill='none')，但同时又希望它对下面的任何其他图形不透明？是这样吗？
是的，我猜是这样的，感谢您对此进行调查-迈克尔的回答似乎符合我的要求

标签： svg gradient

【解决方案1】：

一种可能性是使用 userSpace 单位来进行渐变，如下所示：

<svg height="400px" width="800px" viewBox="0 0 800 400" >
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:rgb(255,255,0);stop-opacity:1" />
            <stop offset="800" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
    <ellipse cx="200" cy="100" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
    <ellipse cx="400" cy="300" rx="85" ry="55" stroke-width = "10" stroke="blue" fill="url(#grad1)" />
</svg>

【讨论】：