تعليميات SVG

مكونات SVG

تدرج لوني SVG

يمكن تعريف الإنسيابية SVG كتدرج سلس من لون إلى آخر. في SVG، هناك نوعان من الإنسيابية، وهي: الإنسيابية الخطية والإنسيابية الدائرية.

الإنسيابية SVG هي طريقة لملء الشكل بالألوان بطريقة غير متساوية. بهذه الطريقة، يمكن أن يتغير ملء أو الخط من لون إلى آخر للشكل. يبدو هذا جيدًا جدًا لبعض أنواع الرسومات.

مثال التدرج

هذا هو الشكل الذي يبدو به تطبيق التدرج على ملء الشكل وخطه:

يكون اللون للرسم البياني الأول ثابتًا، ولكن لون التدرج للملء (من الأخضر الفاتح إلى الأخضر الداكن).
　　يُطبق التدرج على اللون للرسم البياني الثاني في كل من الرسم البياني والملء.
　　يحتوي الرسم البياني الثالث على تدرج لرسم البيانات، ولكن ليس على الملء.
　　تم تطبيق التدرج على ملء الرسم البياني الرابع، ولكن ليس على الرسم البياني.

هناك نوعان من التدرجات:

التدرج الخطي
التدرج الإذاعي

في الفقرات التالية، سنقوم بشرح هذين الجانبين.

التدرج الخطي

التدرج الخطي يتغير من لون إلى آخر بشكل خطي ومتساوٍ. في بداية هذا المقال، رأيت بعض أمثلة التدرج الخطي البسيطة.

يمكن للألوان أن تكون عمودية، أفقية أو تتغير على طول الم矢量 الذي تعريفته. يمكنك أيضًا ملء جزءًا واحدًا فقط من الشكل بالتدرج بدلاً من الشكل بأكمله. قبل أن نستمر، هناك بعض الأمثلة المرئية هنا:

الرسم البياني الأول يستخدم التدرج العمودي. الرسم البياني الثاني يستخدم التدرج الأفقي. الرسم البياني الثالث يستخدم التدرج المائلي (يتحول إلى الداكن في الزاوية السفلية اليمنى). الرسم البياني الرابع يتم استخدامه فقط لملء نصف يمين المربع. باستخدام تدرج خطي SVG، كل هذا ممكن.

التدرج الخطي يتم استخدامه<linearGradient>الذي يتم تعريفه من قبل العنصر. هذا مثال:

مثال

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width: 3;"</svg>"

اختبار لرؤية‹/›

كما ترون،<linearGradient>-element محاط به.<defs>-element يجب دائمًا أن يكون محاطًا به.<defs>-element، لذا يمكن استدعاؤها لاحقًا في الصورة SVG. في هذا المثال، التدرج الخطي يتم تعريفه بواسطة خاصية CSS (fill:url(#myLinearGradient1)). <rect>هذاالنمطالإشارة إلى -element في خاصية.

هذا<linearGradient>-element لديه مستويين من التشابك<stop>-elements. من<linearGradient>-element في تحديد ما قبل تطبيق التدرج وما بعد تطبيق التدرج (اتجاه الإصدار وspreadMethodخصائص). يتم<stop>-elements تتحكم في الألوان المستخدمة في التدرج، مدى قرب الألوان من شكل التدرج، بالإضافة إلى شفافية التدرج.

هذا<linearGradient>- قائمة خصائص -element

خصائص	وصف
ID	معرف فريد يستخدم للإشارة إلى هذا التعريف للتدرج من الشكل.
x1،y1	تعريف اتجاه التدرج بواسطة x1 و y1 (نقطة البداية). يتم تحديد النسبة المئوية (%) ل x1،y1 و x2،y2 للتطبيق على شكل التدرج. (ملاحظة: يمكنك استخدام أرقام مطلقة، ولكن يبدو أن هذا لا يعمل في المتصفحات).
x2،y2	تعريف اتجاه التدرج بواسطة x2 و y2 (نهاية النقطة).
spreadMethod	هذا القيمة تعرف كيف يتم توسيع التدرج في الشكل. هناك 3 قيم محتملة: ملء، تكرار و反射. "pad" تعني أن اللون الأول والأخير في التدرج يتم ملؤه (التوسع) قبل وبعد التدرج. "التكرار" يعني تكرار التدرج في كامل الشكل. "ال反射" يعني أن التدرج يتشكل على الشكل. يتم استخدام طريقة التوزيع فقط عندما لا يمكن ملء الشكل بالكامل (انظر إلى خاصية`offset` 　　　　　　خصائص`<stop>`()).
gradientTransform	يمكنك تحويله قبل تطبيقه التدرج (مثل التدوير). لمزيد من التفاصيل، يرجى الرجوع إلى تحويل SVG،
gradientUnits	الإعداد ما إذا كان يجب استخدام نطاق المستخدم ('userSpaceOnUse') أو تطبيق شكل التدرج لتحديد x1،y1 و x2،y2.
xlink：href	معرف آخر للتدرج، يجب أن تورث هذا التدرج خصائصه من هذا المعرف "الترتيب". بمعنى آخر، إذا لم يتم تعيين قيمة أي خاصية في هذا التدرج، فإن القيمة المفترضة للخصائص ستكون قيمة التدرج الافتراضية.

هذا<stop>قائمة بخصائص العنصر:

خصائص	وصف
offset	بداية هذا اللون (إذا كان اللون الأول للتدرج) أو نهاية (إذا كان اللون الأخير للتدرج) للوصول إلى مسافة الشكل. يتم تحديد ذلك كنسبة مئوية (هي في الواقع مقياس التدرج). على سبيل المثال، 10 في المائة تعني أن اللون يجب أن يبدأ/ينتهي في 10 في المائة من الشكل.
stop-color	لون هذا النقطة الموقف. تبدأ الألوان في التدرج من/إلى.
stop-opacity	شفافية لون هذا النقطة الموقف. إذا زادت الشفافية من نقطة الموقف التي لها 1 إلى نقطة الموقف الأخرى التي لها 0، فإن اللون سيصبح أكثر شفافية تدريجيًا.

تذكر أن كل هذه خصائص الوصف ليست سهلة. هذا أنشأ صورة لشرح معاني هذه الخصائص:

هذه هي تعريف التدرج الخطي المتناسب مع الصورة:

مثال

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%" y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop offset="10%" stop-color="#00cc00" stop-opacity="1"/>
　　　　　　　　<stop offset="30%" stop-color="#006600" stop-opacity="1"/>
　　　　　　　　<stop offset="70%" stop-color="#cc0000" stop-opacity="1"/>
　　　　　　　　<stop offset="90%" stop-color="#000099" stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect x="10" y="10" width="500" height="50" rx="10" ry="10"
　　　　　　　style="fill:url(#myLinearGradient1); stroke: #005000;
　　　　　　　　　　　　　　stroke-width: 3;"　/>
　　　　</svg>

اختبار لرؤية‹/›

اللون الموقف الأول هو #00cc00، وسينطلق من 10 في المائة إلى داخل المثلث. بسببspreadMethodتم تعيينها كـ“مكملة”， تم ملء اللون الأول أيضًا في المثلثقبللون المحطة الأولى (0-10 في المائة).

من 10 في المائة من لون الموقف الأول إلى اللون الموقف الثاني #006600، يصل إلى 30 في المائة من المثلث.

من 30 في المائة من اللون الموقف الثاني إلى اللون الموقف الثالث #cc0000 (الأحمر)، يصل إلى 70 في المائة من المثلث.

من 70 في المائة من اللون الموقف الثالث إلى اللون الموقف الرابع والأخير #000099 (الأزرق)، يصل إلى 90 في المائة. من 90 في المائة إلى بقية المثلث، يتم ملء اللون الموقف الأخير (#000099) في المثلث، لأنspreadMethod 　　ال<linearGradient>خصائص العنصر تم ضبطها على "pad".

التدرج الإذاعي

التدرج الإذاعي هو التدرج الذي تتغير الألوان فيه بشكل دائري وليس خطي. هذا هو مثال على الصورة:

كما ترونه، الألوان الآن تتغير بشكل دائري. الثلاثة الأخيرة (الخضراء) من المربعات تتغير فقط في مركز الإشعاع الأكثر خضرة. المربعات الخضراء الأولى لها ألوان تنتشر من مركز المربع. المربع الثاني يستخدم منتصف الرفع. المربع الثالث يستخدم الزاوية العلوية اليسرى.

التدرج الإذاعي يتم استخدامه<radialGradient>الذي يتم تعريفه من قبل العنصر. هذا مثال:

مثال

<svg　width="512"　height="120">
<defs>
<radialgradient　id="myRadialGradient4"　fx="5%"　fy="5%"　r="65%"　spreadmethod="pad"><stop　offset="0%"　stop-color="#00ee00"　stop-opacity="1"></stop>
<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"></stop></radialgradient></defs>
<rect　x="340"　y="10"　width="100"　height="100"　rx="10"　ry="10"　style="fill:url(#myRadialGradient4);　stroke:　#005000;　stroke-width:　3;"></rect>
　　　</svg>

اختبار لرؤية‹/›

هذا SVG يحدد في الواقع الرسم البياني الرابع الذي يتم عرضه أعلاه. انظر كيف<stop>استخدام العنصر لتحديد الألوان مثل التدرج الخطي (انظر إلى التدرج الخطي).

هذا<radialGradient> 　　قائمة بالخصائص للعنصر:

خصائص	وصف
ID	معرف فريد يستخدم للإشارة إلى هذا التعريف للتدرج من الشكل.
cy،cy	مركز التدرج الإذاعي للx وy. يتم تحديده كنسبة مئوية من عرض وارتفاع الشكل الذي سيتم ملؤه. إذا تم تمريره، فإن القيمة الافتراضية هي 50٪.
fx،fy	تركيز التدرج الإذاعي للx وy. يتم تحديده كنسبة مئوية من عرض وارتفاع الشكل الذي سيتم ملؤه. إذا تم تمريره، فإن القيمة الافتراضية هي 50٪. 　　　　　　ملاحظة: القيمة في Firefox 3.0.5 تبدو أقل من 5٪.
[R	قطر التدرج الإذاعي.
spreadMethod	هذا القيمة تعرف كيف يتم توسيع التدرج في الشكل. هناك 3 قيم محتملة: ملء، تكرار و反射. "pad" تعني أن اللون الأول والأخير في التدرج يتم ملؤه (التوسع) قبل وبعد التدرج. "التكرار" يعني تكرار التدرج في كامل الشكل. "ال反射" يعني أن التدرج يتشكل على الشكل. يتم استخدام طريقة التوزيع فقط عندما لا يمكن ملء الشكل بالكامل (انظر إلى خاصية`offset` 　　　　　　خصائص`<stop>`()).
gradientTransform	يمكنك تحويلها قبل تطبيق التدرج (مثل التدوير). للتفاصيل العاديةتحويللمزيد من التفاصيل، انظرتحويل SVG،
gradientUnits	يحدد ما إذا كان يجب استخدام نطاق العرض ('userSpaceOnUse' ) أو تطبيق الشكل الذي يتم تطبيق التدرج عليه لتحديد x1، y1 و x2، y2. عادةً يمكنك تجاهل هذا الخصوصية.
xlink：href	معرف آخر للتدرج، يجب أن تورث هذا التدرج خصائصه من هذا المعرف "الترتيب". بمعنى آخر، إذا لم يتم تعيين قيمة أي خاصية في هذا التدرج، فإن القيمة المفترضة للخصائص ستكون قيمة التدرج الافتراضية.

مركز التدرج الدائري هو مركز توزيع الألوان الدائرية. إذا وصفت التدرج الدائري كدائرة، فإن cx و cy يحددان مركز الدائرة.

نقطة التركيز للتدرج الدائري هي زاوية إشعاع الألوان. إذا نظرت إلى التدرج الدائري كضوء، فإن النقطة الفاصلة تقرر زاوية تصادم ضوء المصباح بالشكل. 50％，50％ تعني مباشرة من أعلى. 5％，5％ تعني من الزاوية العلوية اليسرى إلى الأسفل. يبدو التدرج وكأنه ضوء مصباح يسطع على شكلك.

قبل تعيين التدرج بشكل صحيح، من المحتمل أن تحتاج أولاً إلى تجربة مركز التدرج والنقطة الفاصلة. أعلم أنني أفعل ذلك لإنشاء هذه الأمثلة البسيطة.

تحويلات التدرج

يمكنك استخدامتحويل SVGلتحويل التدرج. بهذه الطريقة يستخدمgradientTransformخصائص، سواء في<linearGradient>و 　　 <radialGradient>،هذا مثال:

مثال

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width: 3;"</svg>"

اختبار لرؤية‹/›

تعريف هذا المثال بـgradientTransform() 　التدرج الخطي للخصائص، والذي يتم تقلب التدرج بزاوية 45 درجة. عادةً، يتم تقسيم الألوان من أعلى إلى أسفل، ولكن الآن من خلال التقلب، تبدأ من الزاوية العلوية اليمنى إلى الزاوية السفلية اليسرى.

أثر الصورة بعد التشغيل:

نمط التعبئة لـ SVG تحويلات SVG