2

Как написать текст по кругу в svg

 2 years ago
source link: https://gist.github.com/yashaka/d25804de44b1ead810f75be2c6d3d8ea
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Как написать текст по кругу в svg · GitHub

Instantly share code, notes, and snippets.

Как написать текст по кругу в svg

1 Берем пример svg (как код) с текстом по кругу. Сохраняем у себя в gist, где сразу можно просматривать результат...

текст по кругу

редактируем...

2 вписываем свой текст в строке 21:

        <textPath xlink:href="#textcircle">
            ВОТ СЮДА
        </textPath>

3 Что бы поменять размер круга, нужно пропсать значение атрибута d тега path:

<path d="M25,100a75,75 0 1,0 150,0a75,75 0 1,0 -150,0" id="textcircle" />

Это значение можно сгенерировать по ссылке предоставив координаты центра круга (CX, CY) и радиус (R)

Если нужно - можно подтюнить размер холста в

     width="200" 
     height="200">

4 Вдруг что, можно подтюнить размер шрифта, и так далее, в соответствующих параметрах, типа:

        text { 
            font-size: 11px;

Полезные ссылки:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK