Skip to content

Instantly share code, notes, and snippets.

@folkertdev
Created June 26, 2024 08:50
Show Gist options
  • Save folkertdev/01a837336b702c39e7bf6f81e2836e3f to your computer and use it in GitHub Desktop.
Save folkertdev/01a837336b702c39e7bf6f81e2836e3f to your computer and use it in GitHub Desktop.
implicit coordinates are relative zero
Display the source blob
Display the rendered blob
Raw
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Path 1: M10,10 H 30 V 20 -->
<g transform="translate(0, 0)">
<text x="10" y="10" font-family="Arial" font-size="12">Path 1: M10,10 H 30 V 20</text>
<svg x="10" y="20" width="100" height="100">
<path d="M10,10 H 30 V 20" stroke="blue" stroke-width="2" fill="none" />
</svg>
</g>
<!-- Path 2: M10,10 L30,10 L30,20 -->
<g transform="translate(150, 0)">
<text x="10" y="10" font-family="Arial" font-size="12">Path 2: M10,10 L30,10 L30,20</text>
<svg x="10" y="20" width="100" height="100">
<path d="M10,10 L30,10 L30,20" stroke="red" stroke-width="2" fill="none" />
</svg>
</g>
<!-- Path 1: M10,10 h 30 v 20 -->
<g transform="translate(0, 150)">
<text x="10" y="10" font-family="Arial" font-size="12">Path 1: M10,10 h 30 v 20</text>
<svg x="10" y="20" width="100" height="100">
<path d="M10,10 h 30 v 20" stroke="blue" stroke-width="2" fill="none" />
</svg>
</g>
<!-- Path 2: M10,10 L40,10 L40,30 -->
<g transform="translate(150, 150)">
<text x="10" y="10" font-family="Arial" font-size="12">Path 2: M10,10 L40,10 L40,30</text>
<svg x="10" y="20" width="100" height="100">
<path d="M10,10 L40,10 L40,30" stroke="red" stroke-width="2" fill="none" />
</svg>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment