Skip to content

Instantly share code, notes, and snippets.

@tatsuyasusukida

tatsuyasusukida/index.html

Last active April 27, 2022 19:40
Show Gist options
  • Save tatsuyasusukida/1f5839de503ed3096b13cf7a36eda186 to your computer and use it in GitHub Desktop.
Save tatsuyasusukida/1f5839de503ed3096b13cf7a36eda186 to your computer and use it in GitHub Desktop.
Download ZIP
SVG center origin & upper y-axis example
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVGで原点を中心かつY軸を上向きにする方法</title>
</head>
<body>
<h1>SVGで原点を中心かつY軸を上向きにする方法</h1>
<section>
<h2>原点が中心かつY軸が上向きのSVG</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" viewBox="0 0 360 360" stroke="#000" stroke-width="1" fill="none">
<g transform="translate(180, 180) scale(1, -1)"> <!-- <1> -->
<path d="M 179 179 L -179 179 L -179 -179 L 179 -179 Z" />
<path d="M -180 0 L 180 0" />
<path d="M 0 -180 L 0 180" />
<path d="M 0 100 L -80 -50 L 80 -50 Z" />
</g>
</svg>
</section>
<section>
<h2>【参考】原点が左上かつY軸が下向きのSVG</h2>
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" viewBox="0 0 360 360" stroke="#000" fill="none">
<path d="M 179 179 L -179 179 L -179 -179 L 179 -179 Z" />
<path d="M -180 0 L 180 0" />
<path d="M 0 -180 L 0 180" />
<path d="M 0 100 L -80 -50 L 80 -50 Z" />
</svg>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment