Replacement for Using calc with Percent Unit in SVG
July 4, 2023•4,053 words
Non-working Code
With all tags inside SVG tag, calc doesn’t work stably with percent unit as tested, eg. this results in unstable rendering:
1 2 3 | <svg> <line x1="calc(10% + 10px)" y1="0" x2="calc(10% + 50px)" y2="0"/></svg> |
Work-around
Combine percent and px by 2 steps.
G tag alone is not an option, coz it has transform attribute but no x and y;
SVG tag (svg inside svg) alone is not an option, coz it has x and y but no transform.
Solution:
1 2 3 4 5 6 7 | <svg id="Global-Svg"> <svg x="10%" style="overflow:visible;"> <g transform="translate(10, 0)"> <line x1="0" y1="0" x2="40px" y2="0"/> </g> </svg></svg> |