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 you have read our privacy policy.

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