个性化阅读
专注于IT技术分析

SVG径向渐变用法示例

SVG径向渐变用于表示一种颜色到另一种颜色的圆形过渡。

<radialGradient>元素定义径向渐变。我们可以在<defs>元素中使用<radialGradient>元素。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="450" width="450">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255, 255, 255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0, 0, 255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" />
</svg>

</body>
</html>

立即测试

解释

  • id属性定义渐变的唯一名称。
  • fx和fy定义最内圆, cx, cy和r属性定义最外圆。
  • 渐变颜色范围可能由两种或更多种颜色组成, 每种颜色都包含一个 标签。 offset属性定义渐变颜色开始和结束的位置。
  • fill属性用于将eclipse元素链接到渐变。
赞(0) 打赏
未经允许不得转载:srcmini » SVG径向渐变用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏