Cómo alinear un objeto en el documento SVG?

Hay una forma para alinear un objeto (por ejemplo, rect) en formato SVG, relativa a la derecha de la frontera de un grupo o el documento? Quiero que el objeto de mantener su tamaño, cuando me aumentar todo el ancho del documento, pero el aumento de la posición X a permanecer alineado a la derecha.

Saludos,

InformationsquelleAutor noober | 2010-12-23

3 Kommentare

  1. 40

    Yo estaba buscando una manera de hacer flotar un < p> elemento a la derecha de un archivo svg con width=100%.
    Por lo que se podría escalar la imagen y mi < p> elemento que se pegaría a la derecha sin hacer escala.

    Aquí es lo que he averiguado:

    <?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 usar un < svg> etiqueta, donde se coloca el elemento que desea colocar a la derecha de la frontera. Luego de informar a la < svg>-tag no a escala de los elementos interiores y moverlas de manera, que los valores de x están en su máximo e y en mínimo (xMaxYMin)

    preserveAspectRatio="xMaxYMin meet"

    En la misma forma que el centro de ella…

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

  2. 12

    Tenía la misma pregunta y en un principio le gustaba kulpae la respuesta. El problema para mí, sin embargo, era que yo estoy tratando de hacer un scroller-tipo de interfaz en SVG con un alineado a la izquierda el botón de desplazamiento a la izquierda y un alineado a la derecha el botón de desplazamiento a la derecha, y el interior (viewBoxed) svg en kulpae del ejemplo podría tomar todo el ancho de la barra de desplazamiento, por lo tanto, ocultando el contenido de la barra de desplazamiento a partir de la recepción de eventos de clic.

    Mi solución utiliza un 100% x posición anidada svg elemento con un negativo de x elemento con posición 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>
    • Cómo funciona esto con el texto? Yo no siempre saben cómo todo el texto va a ser de antemano.
    • si usted está tratando de alinear texto a la derecha, usted probablemente necesitará de colocarlo dentro de un recipiente que saber el ancho. usted puede alinea a la derecha el texto en el interior de dicho recipiente con texto de anclaje developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
  3. 10

    Necromancing.

    Los diversos alinea para preserveAspectRatio:

    superior izquierda

    preserveAspectRatio="xMinYMin meet"

    superior derecha:

    preserveAspectRatio="xMaxYMin meet"

    izquierda-inferior

    preserveAspectRatio="xMinYMax meet"

    inferior derecha

    preserveAspectRatio="xMaxYMax meet"

    Ejemplo:

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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea