خاصية stroke لـ SVG

يحدد سمت stroke لون الحواف للعنصر الرسومي المحدد. قيمته الافتراضية هي none.

　الخصائص الشائعة تشمل:

1. stroke-width

2. stroke-linecap

3. stroke-linejoin

4. stroke-miterlimit

5. stroke-dasharray + stroke-dashoffset

6. stroke-opacity

خصائص النمط

تحديدات النمط CSS لـ stroke و fill تحدد الخصائص الداخلية للشكل SVG. هذا مثال:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">　
<circle cx="50" cy="50" r="50" style="stroke:　#000066;　fill:　3333ff;"　/>
</svg>

هذا المثال يعرف دائرة بـ لون حبر أزرق عميق ولون ملء أزرق فاتح.

مثال على Stroke

الخطوط المرسومة للشكل SVG هي حدود الشكل. هذا مثال على خط SVG:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　style="stroke:　#000000;　fill:none;"　/>

هذا المثال يعرف دائرة بلا ملء ولون الحبر الأسود (#000000). تأثير الصورة بعد التشغيل:

مثال على الرسم والملء (Stroke & Fill)

يمكنك دمج ألوان الخط والملء في شكل SVG. هذا مثال على الخط والملء في SVG:

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　#3333ff;"　/></svg>

في هذا المثال، تم تعريف دائرة تحتوي على لون خط داكن (#000066) ولون خلفية فاتح (#3333ff). تأثير الصورة بعد تشغيلها:

stroke-width

يملك SVG خاصية stroke-width تعرف عرض الخط. هذا مثال على stroke-width في SVG:

stroke-width:　3px;

في هذا المثال، تم تعيين عرض الخط إلى 3 بكسل. يمكنك استخدام وحدات مختلفة عن البكسل. فيأنظر إلى جميع الوحدات المتاحة في نظام الإحداثيات لـ SVG。

هذه أمثلة أربعة مختلفة لـ stroke-width:

<svg width="500" height="120">
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　1px;"　/>
<circle　cx="150"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　3px;"　/>
<circle　cx="250"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　6px;"　/>
<circle　cx="350"　cy="50"　r="25"
　　　　　　　　style="stroke:　#000066;　fill:　none;stroke-width:　12px;"　/>
</svg>

تأثير الصورة بعد التنفيذ:

غطاء الخط (stroke-linecap)

تعرف خاصية stroke-linecap في CSS SVG كيفية ظهور نهاية الخط. لدي خاصية stroke-linecap ثلاثة قيم محتملة. وهي:

butt
مربعة
round

القيمة ستقوم بإنشاء غطاء رفيع، سيتم قطع نهاية الخط بدقة. القيمة ستقوم بجعل غطاء الخط يبدو مثل قطع (butt)، ولكن سيكون قليلاً أطول من نهاية الخط. القيمة ستقوم بجعل الخط منحني.

هنا ثلاثة أمثلة على stroke-linecap SVG، وتظهر هذه القيم الثلاثة للstroke-linecap (الترتيب = butt، square، round):

يحدد هذا المثال ثلاثة خطوط زرقاء، حيث يكون عرض الخط a stroke-width 10، لتفسير تأثير خاصية stroke-linecap CSS بشكل أفضل. يتم رسم كل خط زرقاء بخط أسود باستخدام stroke-width 1، هذا الخط له نفس الأشكال x1, y1 و x2, y2 كما الخط الزرقاء، ولكن بدون stroke-linecap. بذلك، يمكنك رؤية الفروق بين القيم المختلفة لstroke-linecap.

ربط خطوط الرسم (stroke-linejoin)

تعرف خاصية CSS stroke-linejoin كيفية عرض الاتصال بين خطوط شكل. يمكن أن تأخذ خاصية stroke-linejoin من قيمة واحدة من الثلاثة. هذه القيم هي:

miter
round
bevel

هذه ثلاثة أمثلة على stroke-linejoin SVG، وتوضح هذه القيم المختلفة:

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: miter;" ></path>
<text x="22" y="20">miter</text>
<path d="M120,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: round;" ></path>
<text x="122" y="20">round</text>
<path d="M220,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000; fill:none; stroke-width:16px; stroke-linejoin: bevel;" ></path>
<text x="222" y="20">bevel</text>
</svg>

stroke-miterlimit

استخدم خاصية stroke-miterlimit في نمط مع stroke-linejoin. إذا تم تعيين stroke-linejoin إلى التدرج، فإن stroke-miterlimit يمكن استخدامه لتقديم الحد بين نقطة التقاء الخطوط (تمديد الزاوية (الزاوية)).

هذا مثال SVG stroke-miterlimit:

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000;          fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;        stroke-miterlimit: 1.0;
　　　　　　　　　　　　　"　></path>
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000;          fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;        stroke-miterlimit: 2.0;
　　　　　　　　　　　　　"　></path>
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
　　　　　　style="stroke: #000000;          fill:none;
　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　stroke-linejoin: miter;        stroke-miterlimit: 4.0;
　　　　　　　　　　　　　"　></path>
<text x="229" y="20">4.0</text>
</svg>

لاحظ stroke-miterlimit، كيف تستخدم ثلاثة مسارات ثلاثة قيم مختلفة، وإلا كانت تبدو تقريبًا نفسها. تأثير الصورة بعد التنفيذ:

يُسمى طول الاتصال طول الزوايا المحدبة. يتم قياس طول الزوايا المحدبة من الزاوية الداخلية للاتصال إلى نهاية الاتصال. في هذه الصورة، يتم رسم طول الزوايا المحدبة بالأحمر في أعلى الاتصال، ويتم تكرارها مرة أخرى على اليمين للاتصال:

يمكنك تخيل أن العرض أكبر، زوايا الخطوط بينها أكبر، ووقت الزوايا المحدبة أطول.

يحدد stroke-miterlimit في الواقع الحد الأقصى للنسبة بين طول الزوايا المحدبة وعرض الخط. لذلك، فإن stroke-miterlimit 1.0 يعني أن طول الزوايا المحدبة لا يتجاوز 1 x عرض الخط. إذا تجاوزت الزوايا المحدبة هذا النطاق، فإن 1.0 هو القيمة الأدنى المحتملة لـ stroke-miterlimit.

إليك بعض الأمثلة على استخدام قيمة stroke-miterlimit 1.0، ولكن زوايا الخطوط المختلفة:

لاحظ أن الجزء المقطوع من الزوايا المحدبة أكبر عند الزوايا الكبيرة. هذا بسبب أن الزوايا الحادة تنتج بشكل طبيعي خطوطًا ميلية أطول.

stroke-dasharray + stroke-dashoffset

خصائص CSS SVG stroke-dasharray تستخدم لرسم خطوط الشكل SVG المميزة بالخطوط الفرعية. يُسمى "عدد الليالي" لأنك تقدمت بنص رقمي كقيمة. هذه القيم تعرف طول الليالي والفراغات. لذلك، يجب أن تقدم أرقام زوجية.

هذا مثال على stroke-dasharray SVG:

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20">
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;　　　　　stroke-dasharray:　10　5"　　/>
</svg>

في هذا المثال، يتم تعريف خط كتابة يحتوي على خطوط فرعية، حيث يكون عرض الخط الفرعي 10 بكسل، وعرض المسافة بين الخطوط الفرعية 5 بكسل. تأثير الصورة بعد التنفيذ:

إليك بعض الأمثلة على خطوط الفرعية المختلفة بعرض المسافات المختلفة:

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20">
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　5"　　></line>
<line x1="20" y1="40" x2="120" y2="40">
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5　5　10"　　></line>
</svg>

السطر الأول يبدأ بعرض الخط الفرعي 10 بكسل، ثم يتبعه مسافة 5 بكسل، ثم خط فرعي 5 بكسل، ثم مسافة 5 بكسل أخرى. ثم يتم تكرار هذا النمط.

السطر الثاني يبدأ بعرض الخط الفرعي 10 بكسل، ثم يتبعه مسافة 5 بكسل، ثم خط فرعي 5 بكسل، ثم مسافة 10 بكسل.

تأثير الصورة بعد التنفيذ:

stroke-dashoffset يستخدم لضبط المسافة التي تبدأ فيها النمط الفرعي. يمكنك بدء الرسم من منتصف النمط، مثل بدء الرسم من منتصف النمط، ثم تكرار النمط من هناك. هذا مثال على stroke-dashoffset SVG:

<svg width="500" height="120">
<line x1="20" y1="20" x2="170" y2="20">
　　　　　　style="stroke:　#000000;　fill:none;
　　　　　　stroke-width:　6px;
　　　　　　stroke-dasharray:　10　5;　　　　　stroke-dashoffset:　5;
　　　　　　"　　/>
</svg>

في هذا المثال، يتم تعيين dash-offset إلى 5 بكسل، مما يعني أن رسم الخطوط الفرعية سيبدأ بـ 5 بكسل في النمط الفرعي (ليس كل المتصفحات يدعم هذا الخيار بشكل كامل). تأثير الصورة بعد التنفيذ:

stroke-opacity

الخصائص CSS لـ stroke-opacity في SVG تستخدم لتحديد شفافية شكل SVG. القيمة الديناميكية لـ stroke-opacity القريبة من 0 تعني شفافية أعلى، والقيمة القريبة من 1 تعني عدم شفافية. القيمة الافتراضية لـ stroke-opacity هي 1، مما يعني عدم شفافية الكتابة.

هذا مثال على stroke-opacity SVG، حيث يظهر ثلاثة أسطر من النصوص بـ stroke-opacity مختلفة في أعلى السطر:

<svg width="500" height="120">
　　　　<text　x="22"　y="40">Text　Behind　Shape</text>
　　　　<path　d="M20,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.3;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M80,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　0.7;
　　　　　　　　　　　　　　　　　"　></path>
　　　　<path　d="M140,40　l50,0"
　　　　　　　　　　style="stroke:　#00ff00;　　　　fill:none;
　　　　　　　　　　　　　　　　　stroke-width:16px;
　　　　　　　　　　　　　　　　　stroke-opacity:　1;
　　　　　　　　　　　　　　　　　"　></path>
</svg>

هذه هي الصورة المولدة. يرجى ملاحظة أن النص الخلفي يصبح أقل وضوحًا.