SVG-线性渐变与形状坐标无关 [英] SVG - Linear Gradient independent of the shape coordinates

问题描述

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

I want to draw a svg shape with a linear gradient which is just as the gradient painted for the background. So in the example image below it should look like I paint only the blue ellipse stroke. The reason I cannot just paint the blue stroke is that the ellipse is moving in my concrete application above other objects and within the blue stroke there should not be any object but it should look like the background... With the regular definition the gradient for the ellipse is calculated according to the shape of the ellipse and by that differs from the gradient of the background ... thanks

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

推荐答案

一种可能性是像这样使用userSpace单位进行渐变:

One possibility is to use userSpace units for your gradients like so:

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

这篇关于SVG-线性渐变与形状坐标无关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！