Softonic

Generator tekstu na okręgu SVG

Krok 1 / 2
Dalej

Tekst na okrągłej ścieżce jest częstym detalem odznak, pieczęci i logo. SVG realizuje to przez <textPath>, dzięki któremu element tekstowy podąża za niewidoczną ścieżką. To narzędzie tworzy kompletne SVG w przeglądarce. Wpisz tekst i ustaw promień, rozmiar pisma, odstępy, pozycję startową, kolor oraz kierunek ścieżki. Potem skopiuj lub pobierz SVG.

Jak zakrzywić tekst wokół koła

  1. 1

    Wpisz tekst

    Krótkie frazy (3-8 słów) czytają się najlepiej; długie zdania nachodzą na siebie przy małym promieniu.

  2. 2

    Ustaw promień

    Większy promień = łagodniejsza krzywizna = bardziej czytelne litery. Za mały i litery mocno się przechylają.

  3. 3

    Przesuń punkt startowy

    Użyj Początkowy offset %, aby przesunąć pierwszy znak wzdłuż ścieżki. To pozycja na ścieżce, a nie swobodne sterowanie kątem obrotu.

  4. 4

    Ustaw rozmiar, odstępy i kierunek

    Dostępne ustawienia zmieniają rozmiar pisma, odstępy między literami, kolor oraz kierunek ścieżki zgodny lub przeciwny do ruchu wskazówek zegara.

  5. 5

    Skopiuj SVG

    Wynik zawiera niewidoczną ścieżkę, `<textPath>` i stylizację czcionki, gotowy do wstawienia na dowolną stronę.

Jak textPath działa pod maską

<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>

Atrybut d używa poleceń m/a (moveto / łuk) do narysowania pełnego koła. <textPath> następnie układa ciąg wzdłuż niego. startOffset to procent wzdłuż ścieżki; text-anchor="middle" centruje tekst na tym przesunięciu.

Promień kontra czytelność

Promień (px) Charakter Dobry do
40-60 Bardzo ciasny, zniekształcony Tylko abstrakcyjne logo
80-120 Klasyczna odznaka Ikony aplikacji, monety
140-200 Łagodny łuk Logo kawiarni, herby
250+ Niemal prosty Dekoracja nagłówka

Częste szablony

  • Łuk górny, zacznij na 180°, rozpiętość 180° koła. Górna połowa jest czytelna od lewej do prawej.
  • Łuk dolny z odwróceniem, odwróć kierunek ścieżki albo użyj side="right", aby tekst czytał się poprawnie do góry nogami.
  • Pełny pierścień, tekst owija się raz. Dodaj wiodący i końcowy separator (.), aby punkt złączenia nie raził.

Wskazówki eksportu

  • Wbudowane SVG pozwala ostylować wypełnienie za pomocą currentColor albo właściwości niestandardowej CSS.
  • Unikaj osadzania czcionki webowej wewnątrz SVG, zadeklaruj ją zamiast tego w globalnym CSS, aby przeglądarka ponownie użyła wczytania.
  • Jeśli potrzebujesz statycznego obrazu (PNG, favicon), przepuść SVG przez rasteryzator w docelowym rozmiarze; SVG skaluje się bezstratnie, ale niektóre platformy wciąż chcą bitmapy.

Najczęściej zadawane pytania

Domyślnie textPath podąża za kierunkiem ścieżki. Koło narysowane zgodnie z ruchem wskazówek zegara umieszcza dolną połowę do góry nogami. Albo narysuj dolną połowę jako osobny łuk przeciwny do ruchu wskazówek, użyj side="right" (SVG 2), albo podziel tekst na dwa elementy.

Tak. Wygenerowany element <text> przyjmuje standardowe atrybuty SVG/CSS: fill, font-weight, font-style, letter-spacing. Modyfikuj je w wierszu albo zewnętrznym CSS.

<textPath> jest obsługiwany w Chrome, Firefox, Safari i Edge od ponad dekady. IE11 ma częściowe wsparcie; jeśli wciąż go potrzebujesz, wstępnie zrasteryzuj odznakę.

Dodaj letter-spacing="2" (lub więcej) na elemencie tekstowym. Przy ciasnym promieniu może to znacznie poprawić czytelność.

Nie. Tekst i SVG powstają w przeglądarce. Fraza nie jest wysyłana na serwer ani zapisywana.

Powiązane narzędzia

Próbnik kolorów Material Design

Przeglądaj paletę kolorów Material Design. Kopiuj dowolny odcień (od 50 do A700) w formacie HEX, RGB lub HSL jednym dotknięciem.

Generator papieru w kratkę

Twórz papier w kratkę do druku online: wybierz siatkę lub kropki, ustaw odstęp w mm, wybierz A4 lub Letter oraz własny kolor linii, a następnie wydrukuj lub pobierz czytelny plik SVG.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Kreator flag

Zaprojektuj w przeglądarce prostą własną flagę 3:2 z sześcioma układami, kolorami, tekstem i symbolem. Pobierz SVG lub PNG albo otwórz okno drukowania przeglądarki.

Generator papieru w linie

Twórz papier w linie do druku za darmo. Wybierz linie szerokie, standardowe lub wąskie, ustaw odstęp między liniami w mm, format strony i linię marginesu, a następnie wydrukuj lub pobierz plik SVG.

Kreator wzorów haftu krzyżykowego

Zamień plik JPEG, PNG lub WebP w schemat haftu krzyżykowego: 10–150 krzyżyków, 2–40 własnych kolorów, symbole, dokładne liczby ściegów i wymiary kanwy.

Narzędzie jest dostępne w innych językach