basement basement - 1 month ago 17
CSS Question

Scale an SVG element using a transform origin



<html lang="en-US">
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>

<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"></iframe>

<div class="wrp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
polygon { fill: none; stroke-width: 0.5; stroke: #f00; }
</style>
</defs>

<g transform="translate( 0 12.5 ) scale( 1 )">

<polygon
points="
75,6.7
75,93.3
0,50
"
transform="rotate( -30 50 50 )"
/>

</g>

</svg>
</div>
<script src="origin.js"></script>
</body>
</html>





I want to make the red triangle in the snippet above scale larger while defining a specific transform origin. With the rotate attribute in SVG we can do this:

transform="rotate( -30 50 50 )"


The first value:
-30
rotates element counter-clockwise. The
50 50
defines the transform origin ( x and y respectively ). Can I do this with
scale
?. I want my red triangle to scale up but keep it's origin centered.

Note: I know about
transform-origin
in CSS but I'm assuming the coordinate system that CSS uses will be relative to the whole web page or it's closest positioned element like it usually is... I want to define it in SVG coordinate terms like done with the rotate property.

Answer Source

You can translate --> scale --> translate_back e.g.

<g transform="translate( 0 12.5 ) translate( 50 50) scale( 1.5 ) translate( -50 -50)">

Explanation: Assuming you would like to use (50 50) as the scale origin, this will first translate your shape by (-50, -50) so that your desired scale origin will now be at (0, 0). Then you scale, and finally you reverse the translation to put the shape back where it were.