1

Когда я использую SVG, чтобы нарисовать цикл и поместить текст, то как центрировать текст на SVG Path?

<svg height="500"width="500">
       <path d="M250 250 L250 0 A250,250,0,0,1,250,0  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p0"d="M250 50 A200,200,0,0,1,250,50 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p0">0test text</textPath>
       </text>
       <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z"fill="#ddd"stroke="#ddd"></path>
       <defs>
          <path id="p1"d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997 Z"fill="#ddd"stroke="#ddd"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p1">1test text</textPath>
       </text>
       <path d="M250 250 L466.50635094610965 124.99999999999997 A250,250,0,0,1,466.5063509461097,374.99999999999994  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p2"d="M423.2050807568877 149.99999999999997 A200,200,0,0,1,423.20508075688775,349.99999999999994 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p2">2test text</textPath>
       </text>
       <path d="M250 250 L466.5063509461097 374.99999999999994 A250,250,0,0,1,250.00000000000003,500  L250 250 Z"fill="#ddd"stroke="#ddd"></path>
       <defs>
          <path id="p3"d="M423.20508075688775 349.99999999999994 A200,200,0,0,1,250.00000000000003,450 Z"fill="#ddd"stroke="#ddd"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p3">3test text</textPath>
       </text>
       <path d="M250 250 L250.00000000000003 500 A250,250,0,0,1,33.49364905389038,375.0000000000001  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p4"d="M250.00000000000003 450 A200,200,0,0,1,76.7949192431123,350.0000000000001 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p4">4test text</textPath>
       </text>
       <path d="M250 250 L33.49364905389038 375.0000000000001 A250,250,0,0,1,33.49364905389024,125.00000000000017  L250 250 Z"fill="#ddd"stroke="#ddd"></path>
       <defs>
          <path id="p5"d="M76.7949192431123 350.0000000000001 A200,200,0,0,1,76.79491924311219,150.0000000000001 Z"fill="#ddd"stroke="#ddd"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p5">5test text</textPath>
       </text>
       <path d="M250 250 L33.49364905389024 125.00000000000017 A250,250,0,0,1,249.99999999999994,0  L250 250 Z"fill="#fff"stroke="#fff"></path>
       <defs>
          <path id="p6"d="M76.79491924311219 150.0000000000001 A200,200,0,0,1,249.99999999999994,50 Z"fill="#fff"stroke="#fff"></path>
       </defs>
       <text style="font-size: 24px;"x="0"text-anchor="center">
          <textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p6">6test text</textPath>
       </text>
    </svg>

Свободный перевод вопроса How to Center Text inside an SVG Path от участника @j leos.

2
  • 1
    ассоциация:stackoverflow.com/q/44860320/7394871 14 июл 2019 в 8:53
  • Вопросы по центрированию SVG текста встречаются часто. Но не все знают некоторые нюансы, поэтому и выбран этот топик для перевода 14 июл 2019 в 8:57

2 ответа 2

2

Вы частично решили задачу, но сделали несколько ошибок.

  • text-anchor="center" не правильно. Должно быть - text-anchor="middle".
  • Кроме того, вы должны добавить startOffset = "50%" к элементу <textPath>, чтобы указать, что текст должен быть центрирован на половине пути.
  • Наконец, вам нужно исправить сам path. Вам необходимо удалить команду Z path в конце описания пути. Вам нужна только дуга, а не обратная линия к началу дуги.

<svg height="500"width="500">
 
  <path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997  L250 250 Z" fill="#ddd" stroke="#ddd"></path>
  <defs>
    <path id="p1" d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997" fill="#ddd" stroke="#ddd"></path>
  </defs>
  <text style="font-size: 24px;">
    <textPath xlink:href="#p1" startOffset="50%" text-anchor="middle">1test text</textPath>
  </text>
  
</svg>

Свободный перевод ответа How to Center Text inside an SVG Path от участника @Paul LeBeau.

1

Здесь я размещаю шесть текстов на path. Путь представляет собой полный круг (дугу) с длиной (pathLength), равной 12. Ноль находится в положении 12 часов. Сначала startOffset равен 1, и так далее. Текст закреплен посередине. «Кусочки пиццы» сделаны из замаскированного <круга>. Маска состоит из трех элементов <rect>, которые наклонены и повернуты.

Это настолько чисто, насколько это возможно.

<svg viewBox="0 0 100 100" height="500" width="500">
  <defs>
    <path id="p1" d="M50 10 a 40 40 1 1 0 1 0" pathLength="12" />
    <mask id="m1">
      <g transform="translate(50 50) rotate(15)">
        <rect id="r1" width="50" height="50" fill="white"
          transform="skewX(15) skewY(15)" />
        <use href="#r1" transform="rotate(120)"/>
        <use href="#r1" transform="rotate(240)"/>
      </g>
    </mask>
  </defs>
  <circle cx="50" cy="50" r="50" fill="#ddd" mask="url(#m1)"/>
  <text font-size="6" text-anchor="middle">
    <textPath href="#p1" startOffset="1" side="right">1test text</textPath>
    <textPath href="#p1" startOffset="3" side="right">2test text</textPath>
    <textPath href="#p1" startOffset="5" side="right">3test text</textPath>
    <textPath href="#p1" startOffset="7" side="right">4test text</textPath>
    <textPath href="#p1" startOffset="9" side="right">5test text</textPath>
    <textPath href="#p1" startOffset="11" side="right">6test text</textPath>
  </text>
</svg>

Свободный перевод ответа от участника @chrwahl.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.