texto - centrar imagen html

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

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

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, ¿svg word wrap se queda dentro de ellos? Parece que no puedo encontrar nada específicamente sobre cómo insertar texto dentro de las formas que están centradas tanto horizontal como verticalmente y en el ajuste de la palabra. Además, el texto no puede salir del rectángulo.

Ver el ejemplo de http://www.w3.org/TR/SVG/text.html#TextElement no ayuda, ya que las xey del elemento de texto son diferentes de las xey del rectángulo. 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.)

Las respuestas anteriores dieron resultados pobres al usar esquinas redondeadas o stroke-width que es> 1. Por ejemplo, esperaría que el siguiente código produjera un rectángulo redondeado, pero las esquinas están recortadas por el componente svg principal:

<svg width="200" height="100">  <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 su lugar, recomiendo envolver el text en un svg y luego anidar el nuevo svg y el rect juntos dentro de un elemento g , como en el siguiente ejemplo:

 <svg width="400px" height="300px">  <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>  </svg>

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

Puede usar directamente la propiedad text-anchor = "middle" . Aconsejo crear un elemento contenedor SVG sobre su rectángulo y texto. De esa forma puedes 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>

SVG 1.2 Complemento de texto agregado, pero la mayoría de las implementaciones de SVG que encontrará en el navegador (a excepción de Opera) no han implementado esta característica. Normalmente, depende de usted, el desarrollador, colocar 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 de ''texto'' hace que se renderice una sola cadena de texto. SVG no realiza ningún salto automático de línea o ajuste de palabra. Para lograr el efecto de varias líneas de texto, use uno de los siguientes métodos:
El autor o el paquete de autoría debe precalcular los saltos de línea y usar múltiples elementos de "texto" (uno para cada línea de texto).
El autor o el paquete de autoría debe precalcular los saltos de línea y usar un único elemento ''texto'' con uno o más elementos secundarios ''tspan'' con los 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 del texto del usuario en múltiples líneas de texto; consulte Selección de texto y operaciones en el portapapeles).
Exprese el texto que se va a representar 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 mediante el uso del atributo dy los elementos tspan y, como se menciona en la especificación, algunas herramientas pueden automatizarlo. Por ejemplo, en Inkscape, seleccione la forma que desee y el texto que desee y utilice Texto -> Fluir en marco. Esto le permitirá escribir su texto, con envoltura, 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 utilizar para automatizar automáticamente el ajuste de texto: http://www.carto.net/papers/svg/textFlow/

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

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

Tuve un problema de tiempo consiguiendo algo centrado usando SVG, por lo que rodé 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); }

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

De esta manera, el texto rebasará los límites del 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>

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

Establezca la posición del texto en el centro absoluto del elemento en el que desea centrarlo:
- Si es el padre, puedes hacer x="50%" y ="50%" .
- Si se trata de otro elemento, x sería la x de ese elemento + la mitad de su ancho (y similar para y pero con la altura).
Utilice la propiedad de text-anchor para centrar el texto horizontalmente con el valor middle :
medio
Los caracteres renderizados están alineados de manera que el centro geométrico del texto renderizado resultante está en la posición de texto actual inicial.
Utilice la propiedad alignment-baseline para centrar el texto verticalmente con el valor middle (o según cómo desee que se vea, es posible que desee hacer 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%" alignment-baseline="middle" text-anchor="middle">TEXT</text> </svg>