svg 좌표계 반전
[0,0]이 왼쪽 상단 대신 왼쪽 하단에 있도록 SVG 좌표계를 뒤집는 방법이 있습니까?
나는 많은 실험을 해왔고 유일한 논리적 방법은 다음과 같습니다.
<g transform="translate(0,400)">
<g transform="scale(1,-1)">
여기서 400은 이미지의 높이입니다. 이것은 이미지의 상단이 지금이고 이미지의 하단이되도록 모든 것을 아래로 이동시킨 다음, 스케일 작업은 Y 좌표를 뒤집어 이제 페이지 / 이미지에서 벗어난 비트가 다시 위로 뒤집혀 채워집니다. 남겨진 공간.
데카르트 좌표계로 변환하기 위해 찾은 최고의 모든 콤보는 매우 간단합니다.
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>그러면 css를 통해 페이지의 모든 텍스트 요소가 자동으로 언 플립됩니다 scaleY(-1).
I know this is old, but I was doing the same thing, tried @Nippysaurus version but this is too annoying since everything will be rotated (so if you put images, you'll have to rotate them back). There's another solution though
What I did was simply move the viewBox of the svg and invert all coordinates on the y axis (and removing the height of the object to be at the bottom left corner on it too), like:
<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>
this will put a rect at 20,20 from the bottom left corner of the svg, see http://jsfiddle.net/DUVGz/
Yes, a coordinate rotation of -90 followed by a translation of + the height of your new figure should do it. There is an example at W3C.
<g transform="translate(0,400) scale(1,-1)">
which also equivalent to below
<g transform="scale(1,-1) translate(0,-400) ">
If you don't know the size of the svg than you can use CSS transformations for the whole SVG element:
#parrot {
transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
transform: scale(1,-1);
}
Credits: https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css
An alternative is to use D3 v4 scaleLinear to create a function that will do the swapping for you.
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
I think the simpliest way to rotate element for 180 deg is that you rotate for 180.1 deg;
transform="translate(180.1,0,0)"
참고URL : https://stackoverflow.com/questions/3846015/flip-svg-coordinate-system
'code' 카테고리의 다른 글
| OSX에 LaTeX .sty 파일을 어떻게 설치합니까? (0) | 2020.12.12 |
|---|---|
| 파이썬에서 시간 델타 비교 (0) | 2020.12.12 |
| Django : form.save ()를 재정의하는 방법? (0) | 2020.12.12 |
| 유전자 프로그래밍을 방해하는 것은 무엇입니까? (0) | 2020.12.12 |
| 바코드 스캐너 앱을 사용하지 않고 Zxing 라이브러리 포함 (0) | 2020.12.12 |