درجه خطی SVG

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

تدرج SVG

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

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

  • تدرج خطی
  • تدرج پرتو

تدرج خطی

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

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

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

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

لطفاً کد زیر را به متنی در Notepad کپی کنید و فایل را به عنوان "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%" 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="190" rx="85" ry="55"
style="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%" 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="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>

مثال مشاهده (درجه عمودی)