SVG အစီအစဉ်

SVG 渐变

渐变是从一种颜色到另一种颜色的平滑过渡。此外，可以将多种颜色过渡应用于同一元素。

SVG 中有两种主要的渐变类型：

  • 线性渐变
  • 放射渐变

SVG 线性渐变 -

元素用于定义线性渐变。

元素必须嵌套在 <defs> 标记内。<defs> 元素是定义（definitions）的缩写，包含对特殊元素（比如滤镜）的定义。

线性渐变可以定义为水平、垂直或角度渐变：

  • 当 y1 和 y2 相等且 x1 和 x2 不相等时创建水平渐变
  • 当 x1 和 x2 相等且 y1 和 y2 不相等时创建垂直渐变
  • 当 x1 和 x2 不同并且 y1 和 y2 不相等时创建角度渐变

လေ့ကျင့်ကြိုးစား 1

ပြည်ထောင်စုများကို အစီအစဉ်ပြုပြီး အစီးအစုံများမှ ပြောင်းလဲသော အရောင်သည် အခြေခံအရောင်မှ အစိတ်တစ်ခုတည်းသို့ အစိတ်ပြောင်းလဲသည်။

This is the SVG code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

亲自试一试

代码解释：

  • The id attribute of the <linearGradient> tag defines the unique name of the gradient
  • The x1, x2, y1, y2 attributes of the <linearGradient> tag define the start and end positions of the gradient
  • The color range of the gradient can be composed of two or more colors. Each color is specified by a <stop> tag
  • The offset attribute is used to define the start and end positions of the gradient color
  • The fill attribute links the ellipse element to the gradient

Example 2

Define an ellipse with a vertical linear gradient from yellow to red:

This is the SVG code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />

亲自试一试

Example 3

Define an ellipse and add text inside it, with a horizontal linear gradient from yellow to red:

SVG

This is the SVG code:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG

亲自试一试

代码解释：

  • 元素用于添加文本