تدریس خطوط خطی SVG

تغییر رنگ SVG

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

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

• تغییر رنگ خطی
• تغییر رنگ پرتو

تغییر رنگ خطی SVG - <linearGradient>

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

<linearGradient> عنصر باید درون <defs> درون برچسب‌ها.<defs> عنصر استعاره (abbreviation) برای تعریف (definitions) است، شامل تعریف عناصر خاص (مثل فیلتر).

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

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

مثال 1

تعریف یک دایره که از زرد به قرمز تغییر رنگ خطی افقی دارد:

این کد 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>

پس از آن امتحان کنید

توضیح کد:

• ویژگی id برچسب <linearGradient> نام منحصر به فرد تدریج را تعریف می‌کند
• ویژگی‌های x1، x2، y1، y2 برچسب <linearGradient> مکان شروع و پایان تدریج را تعیین می‌کنند
• رنگ‌های تدریج می‌تواند از دو یا چند رنگ تشکیل شود. هر رنگ با استفاده از برچسب <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>

پس از آن امتحان کنید

مثال 3

این یک دایره تعریف می‌کند و متنی را در داخل آن قرار می‌دهد که دارای یک محو کردن افقی از زرد به قرمز است:

این کد 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>

پس از آن امتحان کنید

توضیح کد:

• عنصر <text> برای افزودن متن استفاده می‌شود