تعليميات SVG

عناصر SVG

علامة <marker> لـ SVG

استخدم علامات SVG لبدء أو وسط أو نهاية مسار أو مسار مستقيم أو مسار متعدد أو مسار متعدد الأضلاع. تعريف العلامة يحدد الرسم البياني للأعمدة أو الرسم البياني المتعدد الأضلاع الذي سيتم رسمه على العنصر <path> أو العنصر <line> أو العنصر <polyline> أو العنصر <polygon> المحدد.

مثال على Marker على الإنترنت

هذا هو مثال بسيط يوضح شكل العلامة:

العلامات يتم إنشاؤها باستخدام عنصر <marker>. يجب أن يكون عنصر <marker> محاطًا في عنصر <defs>. عادة ما يستخدم عنصر <defs> للحفاظ على مجموعة من التعريفات القابلة للتكرار لصور SVG.
هذا هو رمز SVG للمثال السابق

النموذج

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<marker　id="markerCircle"　markerwidth="8"　markerheight="8"　refx="5"　refy="5">
　　　　　　　　　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"></circle>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;"></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,10 L150,10 L150,60" style="stroke: #6666ff; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　</path>
</svg>

اختبار لـ ‹/›

أولاً، لاحظ أن <defs> يحتوي على عنصرين <marker>. تعريف هذين العلامتين يحددان العلامات البداية والنهاية التي تظهر في الصورة السابقة.
ثم، لاحظ كيف يستخدم عنصر <path> الخاصية CSS mark-start و marker-end من داخل خاصية style. هذا هو الطريقة التي يتم بها تحديد العلامة التي سيتم استخدامها للمسار المحدد. سأتحدث عن هذا الموضوع لاحقًا.

تعريف العلامة

يمكنك استخدام عنصر <marker> لتعريف العلامة. إليك مثال:

<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
</marker>

يُحدد في هذا المثال علامة بعرض 8 (markerWidth = "8") وارتفاع 8 (markerHeight = "8"). لأن العلامة هي عنصر رسمي منفرد، لابد من إعداد العرض والارتفاع بشكل صريح.

يُستخدم خاصية id للعنصر <mark> لمرجع العنصر <path>.

يُستخدم إعداد coorDinates refX و refY لتحديد نقطة داخل العلامة كنقطة مرجعية. النقطة المرجعية هي النقطة التي يتم تحديد العلامة عليها عند بداية المسار. في هذا المثال، يتم إعداد refX و refY كوسط الدائرة، مما يعني أن مركز الدائرة سيتموضع عند بداية المسار. إذا لم يتم إعداد refX و refY، سيتم افتراضها كـ 0، مما يجعل الزاوية العلوية اليسرى للعلامة تقع عند بداية المسار.

في داخل عنصر <marker> يوجد عنصر <circle>. يتم تعريف element <circle> مركزه في (cx, cy) = (5,5). نقطة المركز هي مركز العلامة في الصندوق الفارغ. ليست هي الموقع الفعلي الذي يتم وضعها على الصورة. يتم تعيين حجم الصندوق الفارغ في داخل عنصر <marker> باستخدام markerWidth و markerHeight إلى 8.8.

التوجيه التلقائي

هذا هو مثال آخر لـ <marker> تعريف. هذا المثال يعرف مثلثًا يستخدم كرأس مسار.

النموذج

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<marker　id="markerSquare"　markerWidth="7"　markerHeight="7"　refX="4"　refY="4"　orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
</svg>

اختبار لـ ‹/›

<path> في عنصر <marker> يرسم مثلثًا ذا رأس يمين. ولكن إذا لم يكن المسار خطًا أفقياً،则需要 إدارة المثلث ليتناسب مع اتجاه المسار المستخدم. يمكن القيام بذلك عن طريق تعيين خاصية 'الاتجاه' (orient) إلى 'تلقائي' (auto). سيفعل ذلك إدارة الشكل في داخل عنصر <marker> ليتناسب مع المسار الم-reference إليه.

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

النتيجة بعد التنفيذ كالتالي:

هذا هو النتيجة عند تعيين خاصية orient في علامة <mark> إلى auto.

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

الreference إلى العلامة من المسار

يمكنك استخدام هذه الخصائص CSS للreference إلى العلامة من المسار:

marker-start
marker-mid
marker-end

تساهم هذه الثلاثة خصائص CSS في تخصيص العلامة للبداية، الوسط، والنهاية من المسار.

يجب أن تكون خصائص CSS هذه في خاصية style للـ <path> الذي يستخدمها. يمكنك الت-reference إلى عنصر <marker> باستخدام id الخاص به، مثلما هو موضح أدناه:

marker-start　:　url(#markerId);

يجب استبدال markerId بقيمة خاصية id للـ <mark> المطلوب الت-reference.

هذا هو مثال على استخدام جميع ثلاثة خصائص CSS:

النموذج

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<marker　id="markerSquare"　markerWidth="7"　markerHeight="7"　refX="4"　refY="4"　orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
</svg>

اختبار لـ ‹/›

نتيجة التنفيذ كما يلي:

استدعاء العلامات من أشكال أخرى

عنصر <path> ليس العنصر الوحيد الذي يمكن استخدامه مع العلامات في SVG. 　 يمكن أيضًا استخدام العلامات مع عناصر <line>، <polyline> و <polygon>. تعمل بنفس الطريقة تمامًا مثل عنصر <path>، من خلال مراجعة خاصية id لـ <marker> في خصائص CSS لـ marker-start، marker-mid و marker-end.

وحدة العلامة

يمكن تعيين حجم العلامة لتكون مقياسًا لتتناسب مع عرض الحواف المستخدمة في المسار الذي يستخدمها. إليك مثال مرئي:

من خلال تعيين وحدة العلامة لـ <marker> إلى strokeWidth، يمكن تحقيق هذا التأثير. هذا في الواقع هو القيمة الافتراضية لهذه الخاصية، لذا، حتى لو لم تقم بتعيين خاصية markerUnits، هذا هو السلوك الافتراضي. هذا هو الشكل الذي يظهر به SVG:

<marker　id="markerSquare"　markerWidth="7"　markerHeight="7"　refX="4"　refY="4"}
　　　　orient="auto"　markerUnits="strokeWidth">
　　　　<rect　x="1"　y="1"　width="5"　height="5"　style="stroke:　none;　fill:#000000;"/>
</marker>

لمنع التكبير التلقائي للاشارات لجعلها تتكيف مع عرض السطر، يرجى تعيين خاصية markerUnits إلى userSpaceOnUse. بهذا، ستظل العلامة بحجمها مهما كان عرض مسارها.

نص <text> لـ SVG مسار <path> لـ SVG