SVG线上的线性梯度 [英] Linear gradient across SVG line

问题描述

我想知道是否可以将linearGradient across (from top to bottom)设置为直线，而不是下面的示例，其中渐变变为along (from left to right).

I am wondering about possibility to make linearGradient across (from top to bottom) the line, as opposed to the example below where the gradient goes along (from left to right) the line.

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="210" x2="460" y2="210" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30" />
</svg>

更改y坐标对未旋转的线效果很好，并且linearGradient现在越过(从上到下)线:

Changing y coordinates works nicely for unrotated line and linearGradient now goes across (from top to bottom) the line:

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="195" x2="40" y2="225" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30"/> 
</svg>

但不适用于轮换:

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="235" x2="40" y2="265" gradientUnits="userSpaceOnUse">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="290" stroke="url(#e)" stroke-width="30"/> 
</svg>

我想要的是一条旋转的线，其上有一点渐变. 像这样:

And what I want to have is the rotated line with liear gradient across it. Smth like this:

推荐答案

您的意思是旋转渐变吗?然后使用gradientTransform

Do you mean rotate the gradient? Then use gradientTransform

<svg xmlns="http://www.w3.org/2000/svg" version="1">
<defs>
    <linearGradient id="e" x1="40" y1="210" x2="460" y2="210" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90)">
        <stop stop-color="steelblue" offset="0" />
        <stop stop-color="red" offset="1" />
    </linearGradient>
</defs>
 <line x1="40" y1="210" x2="460" y2="210" stroke="url(#e)" stroke-width="30" />
</svg>

这篇关于SVG线上的线性梯度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！