عنصر <g> لـ SVG

يستخدم العنصر SVG <g> لتجميع أشكال SVG معًا. بعد التجميع، يمكنك تحويل الشكل بأكمله كما لو كان شكلاً واحداً. بالمقارنة مع العناصر <svg> المدمجة التي لا يمكن تحويلها كهدف للتحويل، هذا هو ميزة. يمكنك أيضًا تعيين نمط العناصر المجمعة وتكرار استخدامها كما لو كانت عنصرًا واحدًا.

يستخدم العنصر g كحاوية لتجميع العناصر. يتم تطبيق التحويلات المضافة إلى عناصر g على جميع عناصر الفرعية الخاصة بها. يتم تنسيق الخصائص المضافة إلى عناصر g لتوريثها إلى جميع عناصر الفرعية. بالإضافة إلى ذلك، يمكن استخدام عناصر g أيضًا لتعريف عناصر معقدة، والتي يمكن استدعاؤها لاحقًا من خلال عناصر <use>.

مثال SVG <g>

هذا هو SVG البسيط <g>مثال:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<g>
　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　　　style="stroke: #006600;"/>
　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　　　style="stroke: #006600; fill: #006600"/>
　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">
　　　　　　　　oldtoolbag.com المقدمة الأساسية</text>
　　　　
</g>

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

هذا المثال يظهر ثلاثة أشكال يتم جمعها معًا باستخدام عناصر <g>. كما هو موضح هنا، لا يوجد ميزة خاصة في هذا الجمع. ولكن لاحظ ما يحدث عندما نطلب تحويل العنصر <g>. هذا هو الكود:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<g transform="rotate(45 50 50)">
　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　　　style="stroke: #006600;"/>
　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　　　style="stroke: #006600; fill: #006600"/>
　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">
　　　　　　　　oldtoolbag.com المقدمة الأساسية</text>
　　　　
</g>

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

ملاحظة<g>كيفية دوران جميع الأشكال داخل العنصر حول النقطة 50,50 بزاوية 45 درجة.

النمط الخاص بعنصر g يتم تنسيقه من قبل عناصر الفرعية

<g>النمط الخاص بعنصر

<svg　width="320"　height="150"><g　style="stroke:　#0000ff;　stroke-width:　4px;　fill:　#ff0000">
　　　　<rect　　　　x="10"　　y="10"　width="100"　height="50"　/>
　　　　<circle　cx="150"　cy="35"　r="25"　/>
　　　　<circle　cx="250"　cy="35"　r="25"
　　　　　　　　　　　style="stroke:　#009900;　fill:　#00ff00;"/>

</g>

هذا المثال يعرف<g>العنصر الذي يحتوي على ثلاثة عناصر فرعية. في هذا<g> العنصر يحتوي علىstyleلا تحتوي العناصر الفرعية الأولى والثانية علىstyleالخصائص. لذلك، فإن النمط المحدد في العنصر<g>تم تنسيقه من قبل هذه العناصر الفرعية. الثالثة من هذه العناصر الفرعية تحتوي علىstyleإعداد خصائص خط الرسم وألوان الحشو، ولكنها تورث ذلك<g>عنصرstroke-widthالخصائص.

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

النقاط السلبية: لا تحتوي عناصر g على خصائص X وY

مقارنة بتجميع الأشكال داخل عناصر <svg> المدمجة، قدرة تحويل جميع الأشكال داخل عناصر <g> هي ميزة. لا يمكن للعناصر <svg> تحويل نفسها. يجب دمج عنصر <svg> داخل عناصر <g> لتحويل أشكالها المدمجة.
لكن، بالمقارنة مع علامة <svg>، لدي علامة <g> عيباً. لا يمكنك فقط تحريك علامة <g> التي تتضمن جميع الأشكال المدمجة في علامة <g> عن طريق تغيير خصائص x وy لعلامة <g>. لا تحتوي علامة <g> على خصائص x وy. للتحرك ب محتوى علامة <g>، يمكنك فقط استخدام خاصية transform باستخدام دالة "translate"، مثلًا: transform ="translate(x,y)".
إذا كنت بحاجة إلى استخدام خصائص x وy للتحرك بجميع الأشكال داخل علامة <g>، فيجب أن تكون علامة <g> مدمجة داخل علامة <svg>. علامة <svg> تحتوي على خصائص x وy. هذا مثال:

<svg width="320" height="150">
　　　　<g transform="rotate(45 50 50)">
　　　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　　　　　style="stroke: #006600;"/>
　　　　　　　　<rect x="10" y="20" height="50" width="75"
　　　　　　　　　　　　style="stroke: #006600; fill: #006600"/>
　　　　　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">
　　　　　　　　　　oldtoolbag.com المقدمة الأساسية</text>
　　　　
</g>

في هذا المثال،<g>كل الأشكال في العنصر المدمج في　<svg>العنصر المدمج في. يرجى ملاحظة أن<svg>تم تعيين خاصية x له<g>للتحويل، ثم التحرك على المحور x بـ100، لأن<svg>الموقع x = 100. بعد التنفيذ، تأثير الصورة:

يمكنك أيضًا تغيير التدرج، للحصول على<svg>العنصر المدمج في<g>في العنصر، مثلما هو موضح أدناه:

<svg width="320" height="150">
<g transform="rotate(45 50 50)">
<svg x="100">
　　　　<line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"></line>
　　　　<rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect>
　　　　<text x="10" y="90" style="stroke: #660000; fill: #660000">oldtoolbag.com المقدمة الأساسية</text>
</g>

</g>

اختبار لـ ‹/›

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