Cómo centrar y escalar archivos SVG dentro de otro archivo SVG

Question

Estoy desarrollando un programa que genera archivos svg en función de las elecciones que hace el usuario. Una de estas opciones es incluir otro archivo svg centrado en un punto específico en el primero. El segundo archivo tiene una relación de aspecto y un tamaño desconocidos, pero se debe escalar a un tamaño máximo específico, ya sea como alto o ancho, y debe centrarse en un punto específico. El método que uso ahora es tener una etiqueta G que contenga la etiqueta SVG de la imagen incluida, y realizar una transformación en la etiqueta G para escalar y traducir. ¿Hay alguna manera de realizar la escala para obtener un tamaño específico sin conocer el tamaño de la imagen? ¿Y hay alguna forma de que las coordenadas traducidas se apliquen al centro de la imagen en lugar de a la esquina superior izquierda? Soy muy nuevo en SVG, por lo que podría ser que estoy haciendo esto de la manera incorrecta. ¿Hay quizás una mejor manera de obtener los mismos resultados?

Answer 1

supongo que desea tener primero el otro archivo SVG oculto, llamada .getBBox() en JavaScript hacer algunos cálculos sencillos, establezca los parámetros apropiados, mostrarla

Answer 2

entiendo lo que quiere decir, o menos, piensa eso. No hay mejor idea en mi mente para hacer eso en lugar de agrupar. Para mí, <g> es la mejor manera de manipular con un fragmento del documento SVG. Pero en mi opinión, considere el elemento <rect> como contenedor para sus datos visuales. Quizás entonces no sea necesario <g>, depende de sus requisitos de codificación.

Si usted necesita para poner única imagen SVG simple que lo puede hacer como:

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/> 

Si expresas "ancho" y "alto" en unidades fijas (como píxeles) va a lograr lo que yo' Estoy pensando que necesitas También "preserveAspectRatio" está ahí para echar un vistazo a este atributo si lo necesita.

Answer 3

Editar: esta respuesta todavía requiere que sepas el tamaño del SVG interno. La forma más desacoplada es usar el método getBBox() en el lado del navegador, probablemente usando visibility o display para evitar que los usuarios vean los gráficos sin escala. El jsFiddle example se actualiza para usar este método.

---

Para escalar, utilice viewBox attribute. De la documentación del W3C:

A menudo es deseable especificar que un conjunto dado de gráficos se extienda para ajustarse a un elemento contenedor particular. El atributo 'viewBox' proporciona esta capacidad.

Todos los elementos que establecen una nueva ventana gráfica (ver elements that establish viewports), ... tienen el atributo 'viewBox'. El valor del atributo 'viewBox' es una lista de cuatro números <min-x>, <min-y>, <width> y <height>, ... que especifican un rectángulo en el espacio de usuario que debe correlacionarse con los límites de la ventana gráfica establecida por el elemento dado, teniendo en cuenta cuenta attribute ‘preserveAspectRatio’.

Example ViewBox ilustra el uso del atributo 'viewBox' en el elemento exterior svg para especificar que el contenido SVG debe estirarse para ajustarse a los límites de la ventana gráfica.

El ejemplo anterior especifica preserveAspectRadio como none, por lo que el SVG incrustado estira para adaptarse a la SVG recipiente exactamente. El valor predeterminado de preserveAspectRadio, que es xMidYMid meet, debe ajustarse a sus necesidades. Este atributo le permite un control detallado sobre how to scale and position the enclosed graphics.

Una vez que ha escalado el SVG interno a un tamaño conocido con viewBox, el centrado debe ser una cuestión de simple cálculo y utilizando correctamente el atributo transform. Aquí un ejemplo simplificada de http://jsfiddle.net/ento/hPuBY/:

<g transform="translate(125, 125)"> 
    <!-- inner SVG is scaled to fit 150x150 --> 
    <svg width="150" height="150" viewBox="0 0 1500 1000"> 
    <!-- coordinate system inside the SVG is 0x0 <> 1500x1000 --> 
    <rect width="1500" height="1000" /> 
    <text x="750" y="550" font-size="150"> 
     Embedded SVG 
    </text> 
    </svg> 
</g>