web-dev-qa-db-fra.com

Comment aligner un objet dans un document SVG?

Existe-t-il un moyen d'aligner un objet (disons rect) en SVG, par rapport à la bordure droite d'un groupe ou du document? Je souhaite que l'objet conserve sa taille lorsque j'augmente la largeur totale du document, mais augmente la position X pour rester aligné à droite.

Cordialement,

svgalignment
33
noober

Je cherchais un moyen de faire flotter un élément <g> à droite d'un fichier svg avec une largeur = 100%. Ainsi, on pourrait redimensionner l'image et mon élément <g> resterait à droite sans être redimensionné.

Voici ce que j'ai découvert:

<?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>

L'astuce consiste à utiliser une balise <svg>, où vous placez votre élément, que vous souhaitez coller à la bordure droite. Ensuite, vous dites à la balise <svg> de ne pas mettre à l'échelle les éléments internes et de les déplacer de sorte que les valeurs x soient à leur maximum et y au minimum (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

De la même manière, vous pouvez le centrer ...

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

40
kulpae

J'avais la même question et j'ai d'abord aimé la réponse de kulpae. Le problème pour moi, cependant, était que j'essaie de créer une interface de type scroller en SVG avec un bouton aligné à gauche pour faire défiler vers la gauche et un bouton aligné à droite pour faire défiler vers la droite, et le svg intérieur (viewBoxed) dans kulpae. exemple prendrait toute la largeur du scroller, obscurcissant ainsi le contenu du scroller de la réception des événements de clic.

Ma solution a utilisé un élément svg imbriqué 100% positionné x avec un élément négatif positionné x pour le bouton:

<?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>
12
Shabs

Nécromancement.
Les différents alignements pour preserveAspectRatio :

en haut à gauche

preserveAspectRatio="xMinYMin meet"

en haut à droite:

preserveAspectRatio="xMaxYMin meet"

en bas à gauche

preserveAspectRatio="xMinYMax meet"

en bas à droite

preserveAspectRatio="xMaxYMax meet"

Exemple:

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