Cómo centrar texto dentro de una ruta SVG

Resuelto j leos asked hace 7 años • 4 respuestas

Necesito ayuda, cuando uso svg para dibujar un ciclo y poner algo de texto, cómo centrar el texto dentro de una ruta SVG

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

j leos avatar Jul 01 '17 18:07 j leos
Aceptado

Eres parte del camino hacia allí, pero has cometido algunos errores.

text-anchor="center"Está Mal. Debería ser text-anchor="middle".

Además, debe agregar startOffset="50%"al <textPath>elemento para especificar que el texto debe estar centrado en el punto medio del camino.

Finalmente necesitas arreglar el camino en sí. Debe eliminar el Zcomando de ruta al final de la descripción de la ruta. Solo desea el arco, no la línea de retorno al inicio del arco.

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

Paul LeBeau avatar Jul 01 '2017 19:07 Paul LeBeau

Aquí coloco los seis textos en un camino. El camino es un círculo completo (arco) con una longitud ( pathLength) de 12. El cero está a las 12 en punto. Primero startOffsetes 1, y así sucesivamente. El texto está anclado en el medio. Las "porciones de pizza" se elaboran a partir de una <circle>masa enmascarada. La máscara está hecha de tres <rect>s que están sesgadas y giradas.

Esto es lo más limpio posible.

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

chrwahl avatar Oct 01 '2021 17:10 chrwahl

Utilice la propiedad de anclaje de texto con valor medio, por ejemplo:

<svg width="250" height="250">
  <circle cx="125" cy="125" r="100" fill="#aeaeae" />
  <text x="50%" y="50%" text-anchor="middle" fill="white" font-size="100px" font-family="Arial" dy=".3em">BC</text>
Sorry, your browser does not support inline SVG.
</svg>
Expandir fragmento

MELLAL Fethi avatar Oct 04 '2021 23:10 MELLAL Fethi