<circle ... />

时间:2019-07-01 13:46:00

标签: svg gradient

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>

0 个答案:

没有答案