SVGテキストにグラデーションをかける

CSS

HTML

<svg>
    <defs>
        <linearGradient id="myGradient" gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#0e5cad" />
            <stop offset="80%" stop-color="#79f144" />
        </linearGradient>
    </defs>

    <g>
        <text>
            <tspan>Animation</tspan>
        </text>
    </g>
</svg>

CSS

svg {
    fill: url(#myGradient);
    stroke: url(#myGradient);
}
BACK