Mozilla developer guidance建议使用以下代码表示具有线性渐变的圆。有没有办法在<circle />
标签中包含渐变所需的所有代码?
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
例如像这样的东西:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="5" cy="5" r="4" fill="stop offset="5%" stop-color="gold";stop offset="95%" stop-color="red"" />
</svg>