web-dev-qa-db-fra.com

retourner le système de coordonnées svg

Existe-t-il un moyen de retourner le système de coordonnées SVG de sorte que [0,0] se trouve en bas à gauche au lieu du coin supérieur gauche?

svgcoordinate-systemscartesian
58
Nippysaurus

J'ai fait beaucoup d'expérimentation, et la seule méthode logique est la suivante:

<g transform="translate(0,400)">
<g transform="scale(1,-1)">

Où 400 est la hauteur de l'image. Qu'est-ce que cela fait tout déplacer vers le bas de sorte que le haut de l'image soit maintenant et le bas de l'image, puis l'opération d'échelle inverse les coordonnées Y, de sorte que le bit qui est maintenant hors de la page/image soit retourné pour remplir l'espace laissé derrière.

72
Nippysaurus

Le meilleur combo tout autour que j'ai trouvé pour se transformer en un système de coordonnées cartésiennes est assez simple:

css

svg.cartesian {
  display:flex;
}

/* Flip the vertical axis in <g> to emulate cartesian. */
svg.cartesian > g {
  transform: scaleY(-1);
}

/* Re-flip all <text> element descendants to their original side up. */
svg.cartesian > g text {
  transform: scaleY(-1);
}
<html>
  <head></head>
  <body>

  <svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
  <g>
    <!-- SVG Start -->

    <!-- Vertical / Horizontal Axis: Can be removed if you don't want x/y axes. -->
    <path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
    <path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" />
    
    <!-- Plotting: This is an example plotting two points at (20, 20) and (-50, -35), replace it with your data. -->
    <g transform="translate(20, 20)">
      <circle r="1" />
      <text>(20, 20)</text>
    </g>
    <g transform="translate(-50, -35)">
      <circle r="0.5" />
      <text>(-50, -35)</text>
    </g>

    <!-- SVG End -->
  </g>
  </svg>
    </body>
  </html>

Cela déverrouillera automatiquement tous les éléments de texte de la page via la fonction css scaleY(-1).

12
cchamberlain

Je sais que c'est vieux, mais je faisais la même chose, j'ai essayé la version @Nippysaurus mais c'est trop ennuyeux car tout sera tourné (donc si vous mettez des images, vous devrez les faire pivoter). Mais il y a une autre solution

J'ai simplement déplacé la viewBox de svg et inversé toutes les coordonnées sur l'axe y (et en supprimant la hauteur de l'objet pour qu'elle soit également dans le coin inférieur gauche), comme:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="300" viewBox="0 -300 200 300">
  <rect x="20" y="-40" width="20" height="20" stroke="black" stroke-width="1px"></rect>
</svg>

cela mettra un rect à 20,20 du coin inférieur gauche du svg, voir http://jsfiddle.net/DUVGz/

10
Guillaume

Oui, une rotation coordonnée de -90 suivie d'une translation de + la hauteur de votre nouvelle figure devrait le faire. Il y a un exemple à W3C .

4
msw
<g transform="translate(0,400) scale(1,-1)">

qui équivaut également à ci-dessous

<g transform="scale(1,-1) translate(0,-400) ">
3
Scyllar

Si vous ne connaissez pas la taille du svg, vous pouvez utiliser des transformations CSS pour l'ensemble de l'élément SVG:

#parrot {
    transform-Origin: 50% 50%; /* center of rotation is set to the center of the element */
    transform: scale(1,-1);
}

Crédits: https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css

2
Vereb