0

我想在 svg 中重新创建具有特定度数的 css 线性渐变。

例如：

linear-gradient(45deg, yellow,green)

在 svg 中，如果我知道宽度和高度，我可以重新创建它，但我想创建一个流体渐变

我最好的解决方案是：

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1 1'>
    <defs>
        <linearGradient id='g' x1="1"y1='0' y2='1' gradientTransform='rotate(45, .5, .5)'>
            <stop offset='0%' stop-color='green' />
            <stop offset='100%' stop-color='yellow' />
        </linearGradient>
    </defs>
    <rect x='0' y='0' width='100%' height='100%' fill='url(#g)'/>
</svg>

这将创建一个带有渐变的正方形，并且该正方形将在侧面被切割以创建视口内可能的最大正方形。

但是在 css3 规范中，颜色停止将从最近的角落开始，但使用我的解决方案，它将从正方形开始的地方开始。

有更好的解决方案吗？

我希望我清楚地描述了它；）

4

1 回答 1

0

这似乎很接近......

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1 1'>
    <defs>
        <linearGradient id='g' x1="0%" y1="100%" x2="100%" y2="0%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect x='0' y='0' width='100%' height='100%' fill='url(#g)'/>
</svg>
于 2013-10-27T11:06:07.463 回答