Cómo colocar y centrar texto en un rectángulo SVG

Tengo el siguiente rectángulo ...

<rect x="0px" y="0px" width="60px" height="20px"/>

Me gustaría centrar la palabra "Ficción" dentro de ella. Para otros rectángulos, ¿la palabra svg se ajusta para permanecer dentro de ellos? Parece que no puedo encontrar nada específicamente sobre insertar texto dentro de formas que estén centradas tanto horizontal como verticalmente y con ajuste de texto. Además, el texto no puede salir del rectángulo.

Mirar el http://www.w3.org/TR/SVG/text.html#TextElement ejemplo no ayuda ya que los elementos de texto x e y son diferentes de los rectángulo x e y. No parece haber ancho y alto para los elementos de texto. No estoy seguro de las matemáticas aquí.

(Mi tabla html simplemente no va a funcionar).

Una solución fácil para centrar texto horizontal y verticalmente en SVG:

1. Establezca la posición del texto en el centro absoluto del elemento en el que desea centrarlo:

   • Si es el padre, podrías hacerlo x="50%" y ="50%".
   • Si es otro elemento, xsería el xde ese elemento + la mitad de su ancho (y similar para ypero con la altura).

2. Use la text-anchorpropiedad para centrar el texto horizontalmente con el valor middle:

   medio

   Los caracteres representados se alinean de modo que el centro geométrico del texto procesado resultante se encuentre en la posición inicial del texto actual.

3. Use la dominant-baselinepropiedad para centrar el texto verticalmente con el valor middle(o dependiendo de cómo desee que se vea, es posible que desee hacerlo central)

Aquí hay una demostración simple:

<svg width="200" height="100">
  <rect x="0" y="0" width="200" height="100" stroke="red" stroke-width="3px" fill="white"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">TEXT</text>    
</svg>

SVG 1.2 Tiny agregó un ajuste de texto, pero la mayoría de las implementaciones de SVG que encontrará en el navegador (con la excepción de Opera) no han implementado esta función. Normalmente depende de usted, el desarrollador, posicionar el texto manualmente.

La especificación SVG 1.1 proporciona una buena visión general de esta limitación y las posibles soluciones para superarla:

Cada elemento 'texto' hace que se represente una sola cadena de texto. SVG no realiza saltos de línea automáticos ni ajuste de palabras. Para lograr el efecto de varias líneas de texto, use uno de los siguientes métodos:

• El autor o paquete de autoría necesita calcular previamente los saltos de línea y utilizar múltiples elementos de "texto" (uno para cada línea de texto).
• El autor o paquete de autoría necesita calcular previamente los saltos de línea y usar un solo elemento 'texto' con uno o más elementos secundarios 'tspan' con valores apropiados para los atributos 'x', 'y', 'dx' y 'dy' para establecer nuevas posiciones de inicio para aquellos personajes que comienzan nuevas líneas. (Este enfoque permite la selección de texto del usuario en varias líneas de texto; consulte Selección de texto y operaciones del portapapeles).
• Exprese el texto para que se represente en otro espacio de nombres XML, como XHTML [XHTML] incrustado en línea dentro de un elemento 'foreignObject'. (Nota: la semántica exacta de este enfoque no está completamente definida en este momento).

http://www.w3.org/TR/SVG11/text.html#Introduction

Como primitivo, el ajuste de texto se puede simular usando el dyatributo y los tspanelementos, y como se menciona en la especificación, algunas herramientas pueden automatizar esto. Por ejemplo, en Inkscape, seleccione la forma que desee y el texto que desee, y use Texto -> Flujo en marco. Esto le permitirá escribir su texto, con ajuste, que se ajustará según los límites de la forma. Además, asegúrese de seguir estas instrucciones para decirle a Inkscape que mantenga la compatibilidad con SVG 1.1: http://wiki.inkscape.org/wiki/index.php/FAQ#What_about_flowed_text.3F

Además, hay algunas bibliotecas de JavaScript que se pueden usar para automatizar dinámicamente el ajuste de texto: http://www.carto.net/papers/svg/textFlow/

Es interesante observar la solución de CSVG para ajustar una forma a un elemento de texto (por ejemplo, ver su ejemplo de "botón"), aunque es importante mencionar que su implementación no se puede usar en un navegador: http://www.csse.monash.edu .au / ~ clm / csvg / about.html

Menciono esto porque he desarrollado una biblioteca inspirada en CSVG que le permite hacer cosas similares y funciona en navegadores web, aunque aún no la he lanzado.

Las respuestas anteriores dieron malos resultados al usar esquinas redondeadas o stroke-widtheso es> 1. Por ejemplo, esperaría que el siguiente código produzca un rectángulo redondeado, pero el svgcomponente principal recorta las esquinas :

<svg width="200" height="100">
  <!--this rect should have rounded corners-->
  <rect x="0" y="0" rx="5" ry="5" width="200" height="100" stroke="red" stroke-width="10px" fill="white"/>
  <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CLIPPED BORDER</text>    
</svg>

En cambio, recomiendo envolver el texten svgay luego anidar ese nuevo svgy el rectdentro de un gelemento, como en el siguiente ejemplo:

<!--the outer svg here-->
<svg width="400px" height="300px">

  <!--the rect/text group-->
  <g transform="translate(50,50)">
    <rect rx="5" ry="5" width="200" height="100" stroke="green" fill="none" stroke-width="10"/>
    <svg width="200px" height="100px">
      <text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">CORRECT BORDER</text>      
    </svg>
  </g>

  <!--rest of the image's code-->
</svg>

Esto soluciona el problema de recorte que se produce en las respuestas anteriores. También traduje el grupo rect / text usando el transform="translate(x,y)"atributo para demostrar que esto proporciona un enfoque más intuitivo para posicionar el rect / text en la pantalla.

Si está creando el SVG mediante programación, puede simplificarlo y hacer algo como esto:

  <g>
      <rect x={x} y={y} width={width} height={height} />
      <text
          x={x + width / 2}
          y={y + height / 2}
          dominant-baseline="middle"
          text-anchor="middle"
      >
          {label}
      </text>
  </g>

Puede usar directamente la text-anchor = "middle"propiedad. Aconsejo crear un elemento de envoltura svg sobre su rectángulo y texto. De esa manera puede usar todo el elemento usando un selector css. Asegúrese de colocar la propiedad 'x' e 'y' del texto como 50%.

    <svg class="svg-rect" width="50" height="40">
        <rect x="0" y="0" rx="3" ry="3" width="50" height="40" fill="#e7e7e7"></rect>
        <text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="1px" dy=".3em">N/A</text>
    </svg>

Blog de detalles completos: http://blog.techhysahil.com/svg/how-to-center-text-in-svg-shapes/

<svg width="600" height="600">
  <!--   Circle -->
  <g transform="translate(50,40)">
    <circle cx="0" cy="0" r="35" stroke="#aaa" stroke-width="2" fill="#fff"></circle>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  <!--   In Rectangle text position needs to be given half of width and height of rectangle respectively -->
  <!--   Rectangle -->
  <g transform="translate(150,20)">
    <rect width="150" height="40" stroke="#aaa" stroke-width="2" fill="#fff"></rect>
    <text x="75" y="20" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  <!--   Rectangle -->
  <g transform="translate(120,140)">
    <ellipse cx="0" cy="0" rx="100" ry="50" stroke="#aaa" stroke-width="2" fill="#fff"></ellipse>
    <text x="0" y="0" alignment-baseline="middle" font-size="12" stroke-width="0" stroke="#000" text-anchor="middle">HueLink</text>
  </g>
  
  
</svg>

alignment-baselineno es el atributo correcto para usar aquí. La respuesta correcta es usar una combinación de dominant-baseline="central"y text-anchor="middle":

<svg width="200" height="100">
    <g>
        <rect x="0" y="0" width="200" height="100" style="stroke:red; stroke-width:3px; fill:white;"/>
        <text x="50%" y="50%" style="dominant-baseline:central; text-anchor:middle; font-size:40px;">TEXT</text>
    </g>
</svg>

Una forma de insertar texto dentro de un rectángulo es insertar un objeto extraño, que es un DIV, dentro de un objeto rectángulo.

De esta manera, el texto reflejará los límites de la DIV.

var g = d3.select("svg");
					
g.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width","100%")
.attr("height","100%")
.attr("fill","#000");


var fo = g.append("foreignObject")
 .attr("width","100%");

fo.append("xhtml:div")
  .attr("style","width:80%;color:#FFF;margin-right: auto;margin-left: auto;margin-top:40px")
  .text("Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis Mussum Ipsum, cacilds vidis litro abertis");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script>
<svg width="200" height="200"></svg>

Me costó mucho centrarme en SVG, así que desarrollé mi propia pequeña función. espero que te ayude. Tenga en cuenta que solo funciona para elementos SVG.

function centerinparent(element) { //only works for SVG elements
    var bbox = element.getBBox();
    var parentwidth = element.parentNode.width.baseVal.value;
    var parentheight = element.parentNode.height.baseVal.value;
    var newwidth = ((parentwidth / 2) - (bbox.width / 2)) - 2; //i start everything off by 2 to account for line thickness
    var newheight = ((parentheight / 2) - (bbox.height / 2)) - 2;
    //need to adjust for line thickness??

    if (element.classList.contains("textclass")) { //text is origined from bottom left, whereas everything else origin is top left
        newheight += bbox.height; //move it down by its height
    }

    element.setAttributeNS(null, "transform", "translate(" + newwidth + "," + newheight + ")");
    // console.log("centering BOXES:  between width:"+element.parentNode.width.baseVal.value + "   height:"+parentheight);
    // console.log(bbox);
}

Para la alineación horizontal y vertical del texto en gráficos, es posible que desee utilizar los siguientes estilos CSS. En particular, tenga en cuenta que dominant-baseline:middleprobablemente sea incorrecto, ya que esto está (generalmente) a medio camino entre la parte superior y la línea de base, en lugar de a medio camino entre la parte superior y la parte inferior. Además, algunas fuentes (por ejemplo, Mozilla ) usan en dominant-baseline:hanginglugar de dominant-baseline:text-before-edge. Esto probablemente también sea incorrecto, ya que hangingestá diseñado para scripts índicos. Por supuesto, si está utilizando una mezcla de latín, índico, ideógrafos o lo que sea, probablemente necesitará leer la documentación .

/* Horizontal alignment */
text.goesleft{text-anchor:end}
text.equalleftright{text-anchor:middle}
text.goesright{text-anchor:start}
/* Vertical alignment */
text.goesup{dominant-baseline:text-after-edge}
text.equalupdown{dominant-baseline:central}
text.goesdown{dominant-baseline:text-before-edge}
text.ruledpaper{dominant-baseline:alphabetic}

Editar: Acabo de notar que Mozilla también usa lo dominant-baseline:baselineque definitivamente está mal: ¡ni siquiera es un valor reconocido! Supongo que está predeterminado en la fuente predeterminada, que es alphabetic, por lo que tuvieron suerte.

Más edición: Safari (11.1.2) entiende text-before-edgepero no text-after-edge. También falla en ideographic. Grandes cosas, Apple. Por lo tanto, podría verse obligado a usar alphabeticy permitir descendientes después de todo. Lo siento.