SVG linear gradients

SVG tafiye kusa

tafiye kusa shine tafiye daga wata rakiya zuwa wata rakiya a hanyar tsawon rayuwa. Baina, za a iya amfani dashi don amfani da manyan rakiyar daga cikin wata element.

SVG yana da irin tafiye kusa biyu na farko:

  • tafiye kusa
  • tafiye kusa

SVG tafiye kusa - <linearGradient>

<linearGradient> kalmar 'element' yana amfani dashi don siffata tafiye kusa.

<linearGradient> kalmar 'element' wajibin ya kasance ne na: <defs> a cikin kalmar.<defs> kalmar 'element' shine kuma kuma yana nufin tafiyar (definitions), kuma yana da tasiri kan kowane element na special (misali, saukar):

tafiye kusa za a iya siffanta a matsayin tafiya daga hauka zuwa kura, daga hauka zuwa yawa ko daga hauka zuwa nau'ikan yawa:

  • a cikin yankin kuma y1 da y2 yana da iyaka, amma x1 da x2 yana da iyaka ne:
  • a cikin yankin kuma y1 da y2 yana da iyaka, amma x1 da x2 yana da iyaka ne:
  • a cikin yankin kuma yana cikin nau'ikan yawa, kuma y1 da y2 yana da iyaka ne:

kalmar 1

tafiye kusa, ta a da yadda yawa daga zuciya zuwa kura:

此 SVG 代码:

<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)" />
</svg>

Try it yourself

Code explanation:

  • <linearGradient> 标签的 id 属性定义了渐变的唯一名称
  • <linearGradient> 标签的 x1、x2、y1、y2 属性定义渐变的开始和结束位置
  • 渐变的颜色范围可以由两种或多种颜色组成。每种颜色都用 <stop> 标记指定
  • offset 属性用于定义渐变颜色的开始和结束位置
  • fill 属性将椭圆元素链接到渐变

示例 2

定义一个椭圆,它具有从黄色到红色的垂直线性渐变:

此 SVG 代码:

<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)" />
</svg>

Try it yourself

示例 3

定义一个椭圆,并在椭圆内添加文本,它具有从黄色到红色的水平线性渐变:

SVG

此 SVG 代码:

<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</text>
</svg>

Try it yourself

Code explanation:

  • The <text> element is used to add text