Comment aligner un objet dans un document SVG ?

Question

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

Regards,

Answer 1

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

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 voulez 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 à leur minimum (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

De la même façon, vous pouvez le centrer...

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

Answer 2

Nécromancie.
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"

centré

preserveAspectRatio="xMidYMid meet"

Exemple :

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

Answer 3

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

Ma solution a consisté à utiliser un élément svg imbriqué, positionné à 100% en x, avec un élément positionné en x négatif 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>

Answer 4

Nécromancie. Encore.

A partir de CSS, y compris calc() ( [Les développeurs de Mozilla](https://developer.mozilla.org/docs/Web/CSS/calc()) ), le support des CSS dans les SVG, cela fonctionne aussi bien dans les navigateurs :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px">

  <rect x="0" y="0" height="100%" width="25px" fill="#bce0fd" />
  <rect x="calc(100% - 25px)" y="0" height="100%" width="25px" fill="#bce0fd" />

</svg>

Comment ? x o width et ="calc(100% - ??px)"