basement basement - 1 month ago 17
CSS Question

Scale an SVG element using a transform origin

<html lang="en-US">
<link rel="stylesheet" href="">

<iframe src=""></iframe>

<div class="wrp">
<svg xmlns="" viewBox="0 0 100 100"
width="100" height="100"
<style type="text/css">
polygon { fill: none; stroke-width: 0.5; stroke: #f00; }

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

transform="rotate( -30 50 50 )"


<script src="origin.js"></script>

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:
rotates element counter-clockwise. The
50 50
defines the transform origin ( x and y respectively ). Can I do this with
?. I want my red triangle to scale up but keep it's origin centered.

Note: I know about
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.