flip svg système de coordonnées

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

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

Je sais que c’est vieux, mais je faisais la même chose, j’ai essayé la version de @Nippysaurus mais c’est trop agaçant puisque tout sera tourné (donc si vous mettez des images, vous devrez les faire pivoter). Il y a cependant une autre solution

Ce que j’ai fait était simplement de déplacer le viewBox du svg et d’inverser toutes les coordonnées sur l’axe des y (et de supprimer la hauteur de l’object qui se trouve dans le coin inférieur gauche), comme:

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

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

qui équivaut également à ci-dessous

Le meilleur combo complet que j’ai trouvé pour transformer un système de coordonnées cartésien est assez simple:

css

 svg.cartesian { display:flex; } svg.cartesian > g { transform: scaleY(-1); } svg.cartesian > g text { transform: scaleY(-1); } 

Si vous ne connaissez pas la taille du svg, vous pouvez utiliser les 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

Une alternative consiste à utiliser D3 v4 scaleLinear pour créer une fonction qui fera le swapping pour vous.

 import * as d3 from "d3"; ... // Set the height to the actual value to where you want to shift the coords. // Most likely based on the size of the element it is contained within let height = 1; let y = d3.scaleLinear() .domain([0,1]) .range([height,0]); console.log("0 = " + y(0)); // = 1 console.log("0.5 = " + y(0.5)); // = 0.5 console.log("1 = " + y(1)); // = 0 console.log("100 = " + y(100)); // = -99 console.log("-100 = " + y(-100)); // = 101 

Voir le code exécutable via tonic

Je pense que la façon la plus simple de faire pivoter l’élément à 180 degrés est de faire pivoter à 180,1 degrés;

transform = “translate (180.1,0,0)”