¿Cómo alinear un objeto en un documento SVG?

¿Hay alguna manera de alinear un objeto (por ejemplo, rect) en SVG, en relación con el borde derecho de un grupo o el documento? Quiero que el objeto mantenga su tamaño, cuando aumente todo el ancho del documento, pero aumente la posición X para que quede alineado a la derecha.¿Cómo alinear un objeto en un documento SVG?

Regards,

Fuente

2010-12-23 noober

que estaba buscando una manera de flotar a> elemento < g a la derecha de un archivo SVG con width = 100%. Así que uno podría escalar la imagen y mi elemento < g> se pegaría a la derecha sin escalar.

Aquí es lo que descubrí:

<?xml version="1.0" encoding="UTF-8"?> 
<!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:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" 
    baseProfile="full" 
    width="100%" 
    height="100%"> 

    <svg viewBox="0 0 300 300" width="100%" height="300px" 
     preserveAspectRatio="xMaxYMin meet"> 
     <g transform="skewX(45)" style="fill:red;"> 
      <rect x="0" y="0" height="100%" width="20px" /> 
      <rect x="270" y="0" height="100%" width="20px" /> 
     </g> 
    </svg> 
</svg>

El truco es utilizar una etiqueta < SVG>, donde colocar el elemento, que quiere meter a la orilla derecha. Entonces le dice al < SVG> -tag no está a escala los elementos internos y para moverlos de manera, que los valores de x están en su punto máximo y mínimo y en (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

De la misma manera se puede centrar que ...

fuente: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Fuente

2011-06-12 15:34:24 kulpae

que tenían la misma pregunta e inicialmente le gusta la respuesta de kulpae. El problema para mí, sin embargo, fue que estoy tratando de hacer una interfaz de tipo scroller en SVG con un botón alineado a la izquierda para desplazarse a la izquierda y un botón alineado a la derecha para desplazarse a la derecha, y el interno (viewBoxed) svg en kulpae el ejemplo tomaría todo el ancho de la barra de desplazamiento, oscureciendo así el contenido de la barra de desplazamiento de recibir eventos de clic.

Mi solución utiliza un elemento SVG anidada posicionada x 100% con un elemento negativo x-posicionado para el botón:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="100%" height="100%" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <svg id="rightAlign" x="100%" y="0" width="0" height="200" style="overflow: visible;"> 
     <rect id="rightBtn" width="50" height="200" x="-50" y="0" fill="#ff0000"></rect> 
    </svg> 
    <svg id="leftAlign" x="0" y="0" width="0" height="200" style="overflow: visible;"> 
     <rect id="leftBtn" width="50" height="200" x="0" y="0" fill="#ff0000"></rect> 
    </svg> 
</svg>

Fuente

2014-06-07 02:42:26 Shabs

¿Qué tan bien funciona esto con el texto? No siempre sé qué tan amplio será el texto de antemano. – posfan12

@ posfan12 si intenta alinear correctamente el texto, probablemente deba colocarlo dentro de un contenedor del que conoce el ancho. puede alinear correctamente el texto dentro de dicho contenedor con el ancla de texto https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor – Shabs

Necromancing.
Los diversos alinea:

parte superior izquierda

preserveAspectRatio="xMinYMin meet"

superior derecha:

preserveAspectRatio="xMaxYMin meet"

inferior izquierda

preserveAspectRatio="xMinYMax meet"

parte inferior derecha

preserveAspectRatio="xMaxYMax meet"

Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 2560 1600" preserveAspectRatio="xMaxYMin meet">

Fuente

2017-11-21 09:54:22

¿Cómo alinear un objeto en un documento SVG?

Respuesta

Cuestiones relacionadas