SVG:線形グラデーション

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:線形グラデーション/lg1.svg

code:lg1.svg

<defs>

<linearGradient id="sample">

<stop offset="0%" stop-color="#f00" />

<stop offset="50%" stop-color="#0f0" />

<stop offset="100%" stop-color="#00f" />

</linearGradient>

</defs>

<rect width="200" height="100" fill="url(#sample)" />

</svg>

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:線形グラデーション/lg2.svg

code:lg2.svg

<defs>

<linearGradient x2="0%" y2="100%" id="sample">

<stop offset="20%" stop-color="#f00" />

<stop offset="70%" stop-color="#00f" />

</linearGradient>

</defs>

<rect width="200" height="100" fill="url(#sample)" />

</svg>