سبد (0)

شیب رنگ شعاعی در SVG

<radialGradient> یا شیب رنگ شعاعی

از عنصر <radialGradient> برای تعریف یک شیب رنگ شعاعی استفاده می شود. 

عنصر <radialGradient> باید در داخل یک تگ <defs> قرار بگیرد. تگ <defs> مخفف کلمه ی definition است و دربردارنده ی عناصر خاص می باشد( مانند شیب رنگ ها).


مثال 1

ایجاد یک بیضی به همراه یک شیب رنگ شعاعی از رنگ سفید به رنگ آبی:

 

کد SVG مورد نظر، در زیر قرار دارد:

مثال

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0"
 /
>

      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
خودتان امتحان کنید »

توضیح کد بالا:

  • خصوصیت id که در تگ <radialGradient> قرار دارد، یک نام یکتا را برای شیب رنگ تعریف می کند. 
  • خصوصیات cx و cy و r دایره ی بیرونی را تعریف می کنند و خصوصیات fx و fy دایره ی درونی را تعریف می کنند. 
  • یک شیب رنگ می تواند از دو یا چند رنگ تشکیل شود. هر رنگ به وسیله ی یک تگ <stop> تعریف می شود. خصوصیت offset مشخص می کند که رنگ شیب رنگ، از کجا شروع شود و در کجا پایان یابد. 
  • خصوصیت fill، بیضی را به شیب رنگ متصل می کند. 

مثال 2

تعریف یک بیضی دیگر به همراه شیب رنگ شعاعی، از رنگ سفید تا رنگ آبی:

 

کد SVG مورد نظر در زیر قرار دارد:

مثال

<svg height="150" width="500">
  <defs>
    <radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);
      stop-opacity:0"
 /
>

      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان