خصائص SVG Stroke
خصائص SVG Stroke
يقدم SVG مجموعة واسعة من خصائص الحد. في هذا الفصل سوف نلقي نظرة على ما يلي:
- السكتة الدماغية
- عرض السكتة الدماغية
- السكتة الدماغية لينكاب
- السكتة الدماغية dasharray
يمكن تطبيق جميع خصائص الحد على أي نوع من الخطوط والنصوص والمخططات التفصيلية لعناصر مثل الدائرة.
SVG السكتة الدماغية الممتلكات
تحدد خاصية الحد لون خط أو نص أو مخطط تفصيلي لعنصر ما:
هذا هو رمز SVG:
مثال
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
SVG Stroke-width Property
تحدد خاصية عرض الحد سمك خط أو نص أو مخطط تفصيلي لعنصر ما:
هذا هو رمز SVG:
مثال
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
خاصية SVG stroke-linecap
تحدد الخاصية Str-linecap أنواعًا مختلفة من النهايات لمسار مفتوح:
هذا هو رمز SVG:
مثال
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
خاصية SVG stroke-dasharray
تُستخدم خاصية stroke-dasharray لإنشاء خطوط متقطعة:
هذا هو رمز SVG:
مثال
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>