rotate - Forma pura de SVG para ajustar el texto a una caja

svg transform attribute

Question

Tamaño de caja conocido. Longitud de cadena de texto desconocida. Ajustar texto a la caja sin arruinar su relación de aspecto.

Después de una noche de googlear y leer las especificaciones de SVG, estoy bastante seguro de que esto no es posible sin javascript. Lo más cerca que podía estar era usar los atributos de texto textLength y lengthAdjust, pero eso estira el texto solo a lo largo de un eje.

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
</svg>

Soy consciente de que SVG Scaling Text se adapta al contenedor y al texto de ajuste en la caja

Answer 1

Desarrollé la respuesta de @Roberto, pero en lugar de transformar (escalar) el textNode, simplemente:

• darle font-size de font-size de 1em para comenzar
• calcule la escala basada en getBBox
• establecer el font-size a esa escala

(También puede usar 1px etc.)

Aquí está el Rect HOC que hace esto:

import React from ''react'';
import TextBox from ''./TextBox'';

const AutoFitTextBox = TextBoxComponent =>
  class extends React.Component {
    constructor(props) {
      super(props);
      this.svgTextNode = React.createRef();
      this.state = { scale: 1 };
    }

    componentDidMount() {
      const { width, height } = this.props;
      const textBBox = this.getTextBBox();
      const widthScale = width / textBBox.width;
      const heightScale = height / textBBox.height;
      const scale = Math.min(widthScale, heightScale);

      this.setState({ scale });
    }

    getTextBBox() {
      const svgTextNode = this.svgTextNode.current;
      return svgTextNode.getBBox();
    }

    render() {
      const { scale } = this.state;
      return (
        <TextBoxComponent
          forwardRef={this.svgTextNode}
          fontSize={`${scale}em`}
          {...this.props}
        />
      );
    }
  };

export default AutoFitTextBox(TextBox);

Answer 2

No creo que sea la solución para lo que quieres hacer, pero puedes usar textlenght con porcentaje ="100%" para ancho completo.

<svg width="436" height="180"
    style="border:solid 6px"
    xmlns="http://www.w3.org/2000/svg">
    <text x="0%" y="50%" textLength="100%">blabla</text>
</svg>

también puede agregar textanchor="middle" y cambiar la posición x para centrar perfectamente su texto

esto no cambiará el tamaño de fuente y tendrás espacio de letras de espacio raro ...

DEMO JSFIDDLE

Answer 3

No encontré la manera de hacerlo directamente sin Javascript, pero encontré una solución JS bastante fácil, sin bucles y sin modificar el tamaño de fuente y se adapta bien en todas las dimensiones, es decir, el texto crece hasta el límite de el lado más corto.

Básicamente, utilizo la propiedad de transform , calculando la proporción correcta entre el tamaño deseado y el actual.

Este es el código:

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.2" viewBox="0 0 1000 1000" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" >
 <text id="t1" y="50" >MY UGLY TEXT</text>
 <script type="application/ecmascript"> 

    var width=500, height=500;

    var textNode = document.getElementById("t1");
    var bb = textNode.getBBox();
    var widthTransform = width / bb.width;
    var heightTransform = height / bb.height;
    var value = widthTransform < heightTransform ? widthTransform : heightTransform;
    textNode.setAttribute("transform", "matrix("+value+", 0, 0, "+value+", 0,0)");

 </script>
</svg>

En el ejemplo anterior, el texto crece hasta el width == 500 , pero si utilizo un tamaño de caja de width = 500 y height = 30 , entonces el texto crece hasta la height == 30 .

Answer 4

antes que nada: simplemente vi que la respuesta no aborda su necesidad de manera precisa, podría ser una opción, así que aquí vamos:

está correctamente observando que svg no es compatible con el ajuste de palabras directamente. sin embargo, puede beneficiarse de los elementos foreignObject que sirven como un contenedor para fragmentos xhtml donde está disponible el foreignObject de foreignObject .

eche un vistazo a esta demostración independiente (disponible en online ):

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://.com/questions/15430189/pure-svg-way-to-fit-text-to-a-box  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
  <title>simulated wrapping in svg</title>
  <desc>A foreignObject container</desc>

   <!-- Text-Elemente -->
   <foreignObject
      x="100" y="100" width="200" height="150"
      transform="translate(0,0)"
   >
      <xhtml:div style="display: table; height: 150px; overflow: hidden;">
         <xhtml:div style="display: table-cell; vertical-align: middle;">
            <xhtml:div style="color:black; text-align:center;">Demo test that is supposed to be word-wrapped somewhere along the line to show that it is indeed possible to simulate ordinary text containers in svg.</xhtml:div>
         </xhtml:div>
      </xhtml:div>
   </foreignObject>

  <rect x="100" y="100" width="200" height="150" fill="transparent" stroke="red" stroke-width="3"/>
</svg>