ایس وی جی لائن گریدینٹ

تغییرات SVG باید در داخل برچسب <defs> تعریف شوند.

تغییرات SVG

تغییرات یک انتقال نرم از یک رنگ به رنگ دیگر است. علاوه بر این، می‌توان انتقال چندین رنگ به یک عنصر خاص اعمال کرد.

در SVG، دو نوع اصلی تغییرات وجود دارد:

  • تغییرات خطی
  • تغییرات پرتو

تغییرات خطی

برچسب <linearGradient> برای تعریف تغییرات خطی SVG استفاده می‌شود.

برچسب <linearGradient> باید در داخل <defs> قرار گیرد.<defs> مخفف definitions است و می‌تواند برای تعریف عناصر خاص مانند تغییرات استفاده شود.

تغییرات خطی می‌تواند به صورت افقی، عمودی یا گوشه‌ای تعریف شود:

  • وقتی y1 و y2 برابر هستند و x1 و x2 متفاوت هستند، می‌توان تغییرات افقی ایجاد کرد
  • وقتی x1 و x2 برابر هستند و y1 و y2 متفاوت هستند، می‌توان تغییرات عمودی ایجاد کرد
  • وقتی x1 و x2 متفاوت هستند و y1 و y2 متفاوت هستند، می‌توان تغییرات گوشه‌ای ایجاد کرد

لطفاً کد زیر را به متنی کپی کنید و آن را به عنوان "linear1.svg" ذخیره کنید. این فایل را در پوشه وب خود قرار دهید:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" استایل ="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" استایل ="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
استایل ="fill:url(#orange_red)"/>
</svg>

توضیح کد:

  • ویژگی id برچسب <linearGradient> می‌تواند یک نام منحصر به فرد برای تغییرات تعریف کند
  • ویژگی fill:url(#orange_red) عنصر ellipse را به این تغییرات متصل می‌کند
  • ویژگی‌های x1، x2، y1، y2 برچسب <linearGradient> مکان شروع و پایان تغییرات را تعریف می‌کنند
  • رنج رنگ‌های تغییرات می‌تواند از دو یا چند رنگ تشکیل شود. هر رنگ توسط یک برچسب <stop> تعیین می‌شود. ویژگی offset برای تعیین مکان شروع و پایان تغییرات استفاده می‌شود.

مثال را ببینید (تغییرات افقی)

ایک مثال:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" استایل ="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" استایل ="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
استایل ="fill:url(#orange_red)"/>
</svg>

مثال دیکھئے (کمین گریدینٹ)