مولد نص دائري باستخدام دوائر SVG
النص على مسار دائري تفصيل مألوف في الشارات والأختام والشعارات. يستخدم SVG عنصر <textPath> لجعل عنصر النص يتبع مسارًا غير مرئي. تنشئ هذه الأداة ملف SVG كاملًا داخل المتصفح. أدخل النص واضبط نصف القطر وحجم الخط وتباعد الحروف وموضع البداية واللون واتجاه المسار، ثم انسخ SVG أو نزّله.
كيفية تشكيل نص ملتف حول دائرة
-
1
أدخل النص
تُقرأ العبارات القصيرة (من 3 إلى 8 كلمات) بشكل أفضل؛ أما الجمل الطويلة فتتشكل على شكل حلقات صغيرة ذات نصف قطر محدود.
-
2
حدد نصف القطر
كلما زاد نصف القطر، كانت المنحنى أكثر انسيابية، وبالتالي أصبحت الحروف أسهل في القراءة؛ أما إذا كان صغيرًا جدًا، فإن الحروف تميل بشكل ملحوظ.
-
3
حرّك نقطة البداية
استخدم نسبة الإزاحة الابتدائية % لتحريك أول حرف على طول المسار. هذا موضع على المسار، وليس تحكمًا حرًا بزاوية الدوران.
-
4
اضبط الحجم والتباعد والاتجاه
تتحكم الأداة في حجم الخط وتباعد الحروف واللون واتجاه المسار مع أو عكس عقارب الساعة.
-
5
قم بنسخ ملف SVG.
يتضمن المحتوى المسار غير المرئي، ورمز `<textPath>`، بالإضافة إلى تصميم الخطوط، وهو جاهز للإدراج في أي صفحة.
كيف يعمل textPath في الخفاء
<svg viewBox="0 0 300 300">
<defs>
<path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
</defs>
<text font-family="Inter" font-size="24" font-weight="700">
<textPath href="#ring" startOffset="50%" text-anchor="middle">
CDEM SOLUTIONS . EST 2024 .
</textPath>
</text>
</svg>
تستخدم خاصية d أوامر m/a (moveto / arc) لرسم دائرة كاملة، ثم تقوم <textPath> بوضع السطر على طول هذه الدائرة؛ بينما يشير startOffset إلى نسبة مئوية على طول المسار، ويُحدد text-anchor="middle" موقع نص النص في منتصف هذه النسبة.
الحجم مقابل الوضوح
| نصف القطر (بكسيل) | الشعور | مناسب لـ |
|---|---|---|
| 40–60 | ضيق جدًا، مشوَّه | فقط شعارات مجردة |
| 80–120 | شعار كلاسيكي | أيقونات التطبيقات، العملات |
| 140–200 | قوس هادئ | شعارات القهوة، الشعارات الرسمية |
| أكثر من 250 | شبه مستقيم | زينة للعنوان |
الإعدادات المسبقة الشائعة
- القوس العلوي: يبدأ عند زاوية 180° ويغطي كامل مساحة الدائرة البالغة 180°؛ يكون النصف العلوي قابلاً للقراءة من اليسار إلى اليمين.
- القوس السفلي مع عكس المسار: اعكس اتجاه المسار أو حرر ملف SVG المنسوخ لإضافة مسار منفصل للنص السفلي.
- الحلقة الكاملة: يُلتفّ النص مرة واحدة فقط؛ قم بإضافة مسافات تفصل في بداية ونهاية النص (
.) لتجنب إحداث انقطاع غير متناسق عند نقطة الربط.
نصائح للتصدير
يتيح لك SVG المدمج تخصيص لون التعبئة باستخدام currentColor أو خاصية مخصصة في CSS.
- تجنّب إدراج خط ويب داخل ملف SVG؛ بل أعلنه في ملف CSS العام الخاص بك، حتى يستخدم المتصفح نفس الخط مرة أخرى عند التحميل. إذا كنت بحاجة إلى صورة ثابتة (بصيغة PNG أو شعار الموقع)، فقم بمعالجة ملف SVG باستخدام أداة التحويل الرسومي إلى حجمه النهائي المطلوب؛ إذ يتم تكبير ملفات SVG دون فقدان جودة، لكن بعض المنصات ما زالت تتطلب صورة رمزية (bitmap).
الأسئلة الشائعة
يتبع textPath اتجاه المسار. جرّب عكس اتجاه عقارب الساعة وحرّك نسبة الإزاحة الابتدائية مع مراقبة المعاينة. ولإنشاء قوس سفلي دقيق، حرر ملف SVG الذي نزلته بإضافة مسار منفصل.
يغيّر منتقي اللون قيمة fill، وتغيّر أشرطة التمرير الحجم والتباعد. الوزن وعائلة الخط ليسا من عناصر تحكم الأداة، لكن يمكنك تعديلهما في عنصر <text> المنسوخ باستخدام SVG/CSS.
تم دعم الإصدار <textPath> في متصفحات كروم وفايرفوكس وسافاري وإيدج منذ أكثر من عقد من الزمن. أما إصدار IE11 فيوفر دعمًا جزئيًا؛ وإذا كنت لا تزال بحاجة إليه، فقم بتجهيز الشعار مسبقًا.
أضف الرمز letter-spacing="2" (أو أكثر) إلى عنصر النص؛ فعند استخدام نصف قطر ضيق، يمكن لهذا أن يحسّن قراءة النص بشكل ملحوظ.
لا. يُنشأ النص وSVG في متصفحك. لا تُرسل العبارة إلى الخادم ولا تُخزَّن.
أدوات ذات صلة
مولد الورق المسطر
أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.
منتقي ألوان Material Design
تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.
مولّد ورق الرسم البياني
أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.
صانع الأعلام
صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.
عكس ألوان الصورة
قم بعكس كل قناة من قنوات RGB في الصورة لإنتاج صورة سلبية، وهي مفيدة للتعديلات الإبداعية وعرض نسخ الأفلام المصورة.
منشئ قوائم التصنيف إلى مستويات
أنشئ قائمة تصنيف خاصة من نصوص وصور محلية، وخصص المستويات ورتب بالسحب أو لوحة المفاتيح، ثم صدّر JSON أو PNG أو SVG.
الأداة متاحة بلغات أخرى
- Gerador de Texto em Círculo SVG [PT]
- SVG円形テキストジェネレーター [JA]
- Generador de Texto en Círculo SVG [ES]
- SVG 원형 문자 생성기 [KO]
- Tổng hợp công cụ tạo hình vòng tròn SVG [VI]
- SVG cirkeltext-generator [SV]
- SVG-Kreistext-Generator [DE]
- เครื่องมือสร้างเส้นโค้งวงกลมแบบ SVG [TH]
- Générateur de texte en cercle SVG [FR]
- SVG-cirkeltekstgenerator [NL]
- Generator Generik Lingkaran SVG [ID]
- Generator tekstu na okręgu SVG [PL]
- SVG Circle Text Generator [EN]
- Generatore di Testo Circolare SVG [IT]
- Генератор круговых текстов для SVG [RU]
- SVG Daire Metni Oluşturucu [TR]
- SVG 圆形文本生成器 [ZH]