4 ms·
I like it! But instead of modifying your data to suit SVG's default coordinate system, I suggest using a top-level "g" tag with a "transform/scale" attribute. L
by javajosh 3y ago
I like it! But instead of modifying your data to suit SVG's default coordinate system, I suggest using a top-level "g" tag with a "transform/scale" attribute. Like this:
<svg class="natural-units"
width="200px" height="200px"
viewBox="-1 -1 2 2"
>
<desc>A static svg unit circle</desc>
<g transform="scale(1,-1)">
<circle class='unit-circle' r="1" fill="none" stroke-width=".001 "/>
</g>
</svg>
Example adapted from: https://simpatico.io/svg.md#naturalunits https://simpatico.io/svg.md#naturalunits
In this way you can use the intuition about the coordinate system that you built in school.
- bla3 3y agoDoesn't this flip all text in the SVG upside down?
- javajosh 3y agoAlas, yes. And you have to reflip it with another g/scale. But such is life!
- ComputerGuru 3y agoA bigger problem is that it breaks text rendering. Transforms turn off pixel snapping in the hinting engine so you’ll get blurry text or lines. (At least if you applied it as a css transform you would. Maybe if you did it natively in svg you wouldn’t?)