svg path 设置fill的渐变色

最新推荐文章于 2024-07-12 18:17:01 发布

超级大超越

最新推荐文章于 2024-07-12 18:17:01 发布

阅读量2.5k

点赞数 4

文章标签： java 服务器前端

本文链接：https://blog.youkuaiyun.com/u012632105/article/details/132651883

版权

本文介绍了如何在SVG中使用`linearGradient`创建线性渐变，并通过`stop`定义颜色和位置，`path`元素则应用`fill`属性引用渐变，展示了一段代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是一个示例代码，可以参考：

<svg width="100" height="100">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="70%" stop-color="yellow" />
      <stop offset="100%" stop-color="transparent" />
    </linearGradient>
  </defs>
  <path d="M10 10 L90 10 L50 90 Z" fill="url(#gradient)" />
</svg>

其中，linearGradient 定义了一个线性渐变，stop 标签定义了渐变的颜色和位置。path 用 fill 属性引用了渐变。在 stop 中，offset 属性规定了渐变颜色的位置，例如 offset="70%" 表示从 70% 的位置开始变成透明。