Блог

Главная - Вопросы по программированию - SVG Текст на круге — Изменение ориентации текста

SVG Текст на круге — Изменение ориентации текста

#css #svg #fonts

Вопрос:

Я добавляю текст по окружности в SVG. Мне удалось это сделать, но мне нужно «перевернуть» верхние тексты. Текстовый круг Svg

«Сит амет» и «Долор» должны отображаться прямо, как «Лорем» и «Ипсум». Как этого добиться?

 <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0"/>
<path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0"/>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90" >
        <textPath xlink:href="#textcircle">
            Lorem
        </textPath>
</text>
<text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420" >
        <textPath xlink:href="#textcircle">
            Ipsum
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#B6957A;" dy="35" dx="760" >
        <textPath xlink:href="#textcircle">
            Dolor
        </textPath>
</text>
 <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#00B831;" dy="35" dx="1020" >
        <textPath xlink:href="#textcircle">
            Sit amet
        </textPath>
</text>
</svg>

Комментарии:

1. Можете ли вы тоже поделиться своим css?

2. CSS встроен в каждый текст. Никакого дополнительного css.

Ответ №1:

Для этого вам нужно будет изменить направление пути. В этом случае я использую новый путь:

 <path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />

Пожалуйста, обратите внимание, что я изменил 5 — й параметр дуги на 1.

ваш код: d=»M56,256a200,200 0 1,0 400,0 …
мой код: d=»M56,256a200,200 0 1,1 400,0″


Кроме того, я использую только первую дугу, так как текст будет падать на эту.

Я добавил красный stroke цвет к этой дуге, чтобы вы могли ее видеть. Вы можете удалить атрибут штриха.

Еще одно наблюдение состоит в том, что для размещения текста на пути в определенной точке вы можете использовать startOffset атрибут.

Я сохраняю ваш атрибут dy, но вместо использования dy я мог бы изменить радиус круга с 200 на 210 (например).

Также: пожалуйста, обратите внимание, что я использую text-anchor="middle" атрибут. В этом случае отображаемые символы выровнены таким образом, чтобы середина текстовой строки находилась в текущей позиции текста. Это позволяет мне точно задать положение текста, используя startOffset="80%" и startOffset="20%" , т. е. на 20% каждого конца пути. Если вы не хотите использовать text-anchor="middle" его, вы можете удалить его.

 <svg viewBox="0 0 512 512">
  <path style="fill:#EFEFEF;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0" />
  <path id="textcircle" style="fill:#FAFAFA;" d="M56,256a200,200 0 1,0 400,0a200,200 0 1,0 -400,0" />

  <path id="textcircle1" stroke="red" fill="none" d="M56,256a200,200 0 1,1 400,0" />

  <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FFAD01;" dy="35" dx="90">
    <textPath xlink:href="#textcircle">
      Lorem
    </textPath>
  </text>
  <text style="font-family: sans-serif; font-weight: 900; font-size:1.2em; fill:#FF7101;" dy="35" dx="420">
    <textPath xlink:href="#textcircle">
      Ipsum
    </textPath>
  </text>

  <g style="font-family: sans-serif; font-weight: 900; font-size:1.2em;" text-anchor="middle">
    <text fill="#B957A" dy="-10">
      <textPath startOffset="80%" xlink:href="#textcircle1">
        Dolor
      </textPath>
    </text>
    <text style="fill:#00B831;" dy="-10">
      <textPath xlink:href="#textcircle1" startOffset="20%">
        Sit amet
      </textPath>
    </text>
</svg>

Комментарии:

1. Это сделало свое дело. Тоже очень полезное объяснение. Спасибо!

2. Я не думаю, что это работает. Я также попробовал проехать по двойной дороге, но мы попали в один и тот же квартал. Текст находится не на одном уровне: jsfiddle.net/tb2koyrd

3. Вы можете изменить dy на -25

Метки: