1import{S as Cn,i as An,s as Pn,N as Is,z as Nn,A as On,C as Sn,R as Dn,T as rn,t as Gn,b as In,D as Rn,O as kn,e as l,d as f,f as u,L as i,l as c,m as p,k as v,j as s,n as r,M as k,o as n,B as Hn,p as o,q as t,y as jn}from"./index.bd0d3ab8.js";import{L as Mn}from"./Layout.872cfa2b.js";function $n(pa){let m,w,_,W,g,E,ea,va,ps,ba,oa,es,Ba,A,os,ga,ls,cs,Ca,X,fn=`<code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 16 16<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 2 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span><span class="token punctuation">></span></span> 3 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span> 4 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m8 16v-16m-7 4 14 8m0-8-14 8<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 5 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>path</span><span class="token punctuation">></span></span> 6 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span> 7 <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span> 8 <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scale<span class="token punctuation">"</span></span>
9 <span class="token attr-name">values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5; 1.5; 0.5<span class="token punctuation">"</span></span> 10 <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6s<span class="token punctuation">"</span></span> 11 <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>indefinite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateTransform</span><span class="token punctuation">></span></span> 12 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 13<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code>`,Aa,P,J,N,O,T,Pa,d,us,da,rs,is,wa,ks,ms,ha,fs,vs,_a,gs,ds,Ea,ws,hs,qa,_s,Es,Na,S,qs,xa,xs,ys,Oa,K,vn=`<code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span> 14 <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span> 15 <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rotate<span class="token punctuation">"</span></span> 16 <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 8 8<span class="token punctuation">"</span></span> 17 <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>360 8 8<span class="token punctuation">"</span></span> 18 <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12s<span class="token punctuation">"</span></span> 19 <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>indefinite<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code>`,Sa,la,Ts,Da,Q,gn=`<code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 16 16<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 20 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span><span class="token punctuation">></span></span> 21 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span> 22 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m8 16v-16m-7 4 14 8m0-8-14 8<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 23 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>path</span><span class="token punctuation">></span></span> 24 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span>
25 <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span> 26 <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rotate<span class="token punctuation">"</span></span> 27 <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 8 8<span class="token punctuation">"</span></span> 28 <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>360 8 8<span class="token punctuation">"</span></span> 29 <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12s<span class="token punctuation">"</span></span> 30 <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>indefinite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateTransform</span><span class="token punctuation">></span></span> 31 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 32<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code>`,Ga,D,Z,G,I,q,Ia,ca,bs,Ra,R,aa,H,j,x,Ha,ua,Bs,ja,ra,Cs,Ma,M,As,ya,Ps,Ns,$a,ia,Ta,Os,La,sa,dn=`<code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 16 16<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 33 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">transform-origin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8 8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 34 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span> 35 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m8 16v-16m-7 4 14 8m0-8-14 8<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 36 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>path</span><span class="token punctuation">></span></span> 37 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span>
38 <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span> 39 <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scale<span class="token punctuation">"</span></span> 40 <span class="token attr-name">values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5; 1.5; 0.5<span class="token punctuation">"</span></span> 41 <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6s<span class="token punctuation">"</span></span> 42 <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>indefinite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateTransform</span><span class="token punctuation">></span></span> 43 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 44<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code>`,Va,$,L,V,z,b,za,ka,Ss,Fa,na,wn=`<code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 16 16<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 45 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">transform-origin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8 8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 46 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>circle</span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">cx</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">cy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">r</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>circle</span><span class="token punctuation">></span></span> 47 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>m8 16v-16m-7 4 14 8m0-8-14 8<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#EAB308<span class="token punctuation">"</span></span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
48 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span> 49 <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span> 50 <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rotate<span class="token punctuation">"</span></span> 51 <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 8 8<span class="token punctuation">"</span></span> 52 <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>360 8 8<span class="token punctuation">"</span></span> 53 <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12s<span class="token punctuation">"</span></span> 54 <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>indefinite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateTransform</span><span class="token punctuation">></span></span> 55 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>path</span><span class="token punctuation">></span></span> 56 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>animateTransform</span> 57 <span class="token attr-name">attributeName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>transform<span class="token punctuation">"</span></span> 58 <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scale<span class="token punctuation">"</span></span> 59 <span class="token attr-name">values</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5; 1.5; 0.5<span class="token punctuation">"</span></span> 60 <span class="token attr-name">dur</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6s<span class="token punctuation">"</span></span> 61 <span class="token attr-name">repeatCount</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>indefinite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>animateTransform</span><span class="token punctuation">></span></span> 62 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 63<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code>`,Ua,F,U,Y,B,y,C,Ya,ma,ta,Ds,Wa,fa,Gs;return{c(){m=l("figure"),w=l("picture"),_=l("source"),W=f(),g=l("img"),ea=f(),va=l("figcaption"),ps=u("Photo credit @joshuas on Unsplash"),ba=f(),oa=l("h3"),es=u("The Problem"),Ba=f(),A=l("p"),os=u("You want to scale part of a SVG using "),ga=l("code"),ls=u("<animateTransform>"),cs=u(", but when trying to scale, it scales from the top left corner, not the center."),Ca=f(),X=l("pre"),Aa=f(),P=i("svg"),J=i("g"),N=i("circle"),O=i("path"),T=i("animateTransform"),Pa=f(),d=l("p"),us=u("One would think the "),da=l("code"),rs=u("scale"),is=u(" command would have options for the "),wa=l("code"),ks=u("from"),ms=u("/"),ha=l("code"),fs=u("to"),vs=u("/"),_a=l("code"),gs=u("values"),ds=u(" to not just set "),Ea=l("code"),ws=u("scaleX"),hs=u(" and "),qa=l("code"),_s=u("scaleY"),Es=u(", but also a point to transform around."),Na=f(),S=l("p"),qs=u("Rotate works this way. For example, if you want to rotate from 0deg to 360deg, around the point 8,8, then you can just add "),xa=l("code"),xs=u("8 8"),ys=u(":"),Oa=f(),K=l("pre"),Sa=f(),la=l("p"),Ts=u("And it works fine:"),Da=f(),Q=l("pre"),Ga=f(),D=i("svg"),Z=i("g"),G=i("circle"),I=i("path"),q=i("animateTransform"),Ia=f(),ca=l("p"),bs=u("Without centering around 8,8:"),Ra=f(
63),R=i("svg"),aa=i("g"),H=i("circle"),j=i("path"),x=i("animateTransform"),Ha=f(),ua=l("h3"),Bs=u("The Answer"),ja=f(),ra=l("p"),Cs=u("I searched for a long time for the answer, on StackOverflow and dozens of forumns with hundreds of replies. I looked at the SVG docs and docs on Mozilla and elsewhere and could not find the answer."),Ma=f(),M=l("p"),As=u("However, the answer is quite simple, and it simply requires setting the "),ya=l("code"),Ps=u("transform-origin"),Ns=u(" in the item youâre animating:"),$a=f(),ia=l("p"),Ta=l("code"),Os=u('<g transform-origin="8 8">'),La=f(),sa=l("pre"),Va=f(),$=i("svg"),L=i("g"),V=i("circle"),z=i("path"),b=i("animateTransform"),za=f(),ka=l("p"),Ss=u("For fun, combining with our rotation:"),Fa=f(),na=l("pre"),Ua=f(),F=i("svg"),U=i("g"),Y=i("circle"),B=i("path"),y=i("animateTransform"),C=i("animateTransform"),Ya=f(),ma=l("p"),ta=l("a"),Ds=u("Transform Origin SVG Docs"),Wa=f(),fa=l("p"),Gs=u("I hope this helps someone!"),this.h()},l(a){m=c(a,"FIGURE",{});var e=p(m);w=c(e,"PICTURE",{});var Xa=p(w);_=c(Xa,"SOURCE",{type:!0,srcset:!0,alt:!0}),W=v(Xa),g=c(Xa,"IMG",{src:!0,alt:!0}),Xa.forEach(s),ea=v(e),va=c(e,"FIGCAPTION",{});var Rs=p(va);ps=r(Rs,"Photo credit @joshuas on Unsplash"),Rs.forEach(s),e.forEach(s),ba=v(a),oa=c(a,"H3",{});var Hs=p(oa);es=r(Hs,"The Problem"),Hs.forEach(s),Ba=v(a),A=c(a,"P",{});var Ja=p(A);os=r(Ja,"You want to scale part of a SVG using "),ga=c(Ja,"CODE",{});var js=p(ga);ls=r(js,"<animateTransform>"),js.forEach(s),cs=r(Ja,", but when trying to scale, it scales from the top left corner, not the center."),Ja.forEach(s),Ca=v(a),X=c(a,"PRE",{class:!0});var hn=p(X);hn.forEach(s),Aa=v(a),P=k(a,"svg",{xmlns:!0,viewBox:!0});var Ms=p(P);J=k(Ms,"g",{});var Ka=p(J);N=k(Ka,"circle",{fill:!0,cx:!0,cy:!0,r:!0}),p(N).forEach(s),O=k(Ka,"path",{d:!0,fill:!0,stroke:!0,"stroke-width":!0});var _n=p(O);_n.forEach(s),T=k(Ka,"animateTransform",{attributeName:!0,type:!0,values:!0,dur:!0,repeatCount:!0}),p(T).forEach(s),Ka.forEach(s),Ms.forEach(s),Pa=v(a),d=c(a,"P",{});var h=p(d);us=r(h,"One would think the "),da=c(h,"CODE",{});var $s=p(da);rs=r($s,"scale"),$s.forEach(s),is=r(h," command would have options for the "),wa=c(h,"CODE",{});var Ls=p(wa);ks=r(Ls,"from"),Ls.forEach(s),ms=r(h,"/"),ha=c(h,"CODE",{});var Vs=p(ha);fs=r(Vs,"to"),Vs.forEach(s),vs=r(h,"/"),_a=c(h,"CODE",{});var zs=p(_a);gs=r(zs,"values"),zs.forEach(s),ds=r(h," to not just set "),Ea=c(h,"CODE",{});var Fs=p(Ea);ws=r(Fs,"scaleX"),Fs.forEach(s),hs=r(h," and "),qa=c(h,"CODE",{});var Us=p(qa);_s=r(Us,"scaleY"),Us.forEach(s),Es=r(h,", but also a point to transform around."),h.forEach(s),Na=v(a),S=c(a,"P",{});var Qa=p(S);qs=r(Qa,"Rotate works this way. For example, if you want to rotate from 0deg to 360deg, around the point 8,8, then you can just add "),xa=c(Qa,"CODE",{});var Ys=p(xa);xs=r(Ys,"8 8"),Ys.forEach(s),ys=r(Qa,":"),Qa.forEach(s),Oa=v(a),K=c(a,"PRE",{class:!0});var En=p(K);En.forEach(s),Sa=v(a),la=c(a,"P",{});var Ws=p(la);Ts=r(Ws,"And it works fine:"),Ws.forEach(s),Da=v(a),Q=c(a,"PRE",{class:!0});var qn=p(Q);qn.forEach(s),Ga=v(a),D=k(a,"svg",{xmlns:!0,viewBox:!0});var Xs=p(D);Z=k(Xs,"g",{});var Za=p(Z);G=k(Za,"circle",{fill:!0,cx:!0,cy:!0,r:!0}),p(G).forEach(s),I=k(Za,"path",{d:!0,fill:!0,stroke:!0,"stroke-width":!0});var xn=p(I);xn.forEach(s),q=k(Za,"animateTransform",{attributeName:!0,type:!0,from:!0,to:!0,dur:!0,repeatCount:!0}),p(q).forEach(s),Za.forEach(s),Xs.forEach(s),Ia=v(a),ca=c(a,"P",{});var Js=p(ca);
63bs=r(Js,"Without centering around 8,8:"),Js.forEach(s),Ra=v(a),R=k(a,"svg",{xmlns:!0,viewBox:!0});var Ks=p(R);aa=k(Ks,"g",{});var as=p(aa);H=k(as,"circle",{fill:!0,cx:!0,cy:!0,r:!0}),p(H).forEach(s),j=k(as,"path",{d:!0,fill:!0,stroke:!0,"stroke-width":!0});var yn=p(j);yn.forEach(s),x=k(as,"animateTransform",{attributeName:!0,type:!0,from:!0,to:!0,dur:!0,repeatCount:!0}),p(x).forEach(s),as.forEach(s),Ks.forEach(s),Ha=v(a),ua=c(a,"H3",{});var Qs=p(ua);Bs=r(Qs,"The Answer"),Qs.forEach(s),ja=v(a),ra=c(a,"P",{});var Zs=p(ra);Cs=r(Zs,"I searched for a long time for the answer, on StackOverflow and dozens of forumns with hundreds of replies. I looked at the SVG docs and docs on Mozilla and elsewhere and could not find the answer."),Zs.forEach(s),Ma=v(a),M=c(a,"P",{});var ss=p(M);As=r(ss,"However, the answer is quite simple, and it simply requires setting the "),ya=c(ss,"CODE",{});var an=p(ya);Ps=r(an,"transform-origin"),an.forEach(s),Ns=r(ss," in the item youâre animating:"),ss.forEach(s),$a=v(a),ia=c(a,"P",{});var sn=p(ia);Ta=c(sn,"CODE",{});var nn=p(Ta);Os=r(nn,'<g transform-origin="8 8">'),nn.forEach(s),sn.forEach(s),La=v(a),sa=c(a,"PRE",{class:!0});var Tn=p(sa);Tn.forEach(s),Va=v(a),$=k(a,"svg",{xmlns:!0,viewBox:!0});var tn=p($);L=k(tn,"g",{"transform-origin":!0});var ns=p(L);V=k(ns,"circle",{fill:!0,cx:!0,cy:!0,r:!0}),p(V).forEach(s),z=k(ns,"path",{d:!0,fill:!0,stroke:!0,"stroke-width":!0});var bn=p(z);bn.forEach(s),b=k(ns,"animateTransform",{attributeName:!0,type:!0,values:!0,dur:!0,repeatCount:!0}),p(b).forEach(s),ns.forEach(s),tn.forEach(s),za=v(a),ka=c(a,"P",{});var pn=p(ka);Ss=r(pn,"For fun, combining with our rotation:"),pn.forEach(s),Fa=v(a),na=c(a,"PRE",{class:!0});var Bn=p(na);Bn.forEach(s),Ua=v(a),F=k(a,"svg",{xmlns:!0,viewBox:!0});var en=p(F);U=k(en,"g",{"transform-origin":!0});var ts=p(U);Y=k(ts,"circle",{fill:!0,cx:!0,cy:!0,r:!0}),p(Y).forEach(s),B=k(ts,"path",{d:!0,fill:!0,stroke:!0,"stroke-width":!0});var on=p(B);y=k(on,"animateTransform",{attributeName:!0,type:!0,from:!0,to:!0,dur:!0,repeatCount:!0}),p(y).forEach(s),on.forEach(s),C=k(ts,"animateTransform",{attributeName:!0,type:!0,values:!0,dur:!0,repeatCount:!0}),p(C).forEach(s),ts.forEach(s),en.forEach(s),Ya=v(a),ma=c(a,"P",{});var ln=p(ma);ta=c(ln,"A",{href:!0,rel:!0});var cn=p(ta);Ds=r(cn,"Transform Origin SVG Docs"),cn.forEach(s),ln.forEach(s),Wa=v(a),fa=c(a,"P",{});var un=p(fa);Gs=r(un,"I hope this helps someone!"),un.forEach(s),this.h()},h(){n(_,"type","image/avif"),n(_,"srcset","/img/blog/circles.avif"),n(_,"alt",""),Hn(g.src,E="/img/blog/circles.jpg")||n(g,"src",E),n(g,"alt",""),n(X,"class","language-xml"),n(N,"fill","#EAB308"),n(N,"cx","8"),n(N,"cy","8"),n(N,"r","4"),n(O,"d","m8 16v-16m-7 4 14 8m0-8-14 8"),n(O,"fill","none"),n(O,"stroke","#EAB308"),n(O,"stroke-width","1"),n(T,"attributeName","transform"),n(T,"type","scale"),n(T,"values","0.5; 1.5; 0.5"),n(T,"dur","6s"),n(T,"repeatCount","indefinite"),n(P,"xmlns","http://www.w3.org/2000/svg"),n(P,"viewBox","0 0 16 16"),n(K,"class","language-xml"),n(Q,"class","language-xml"),n(G,"fill","#EAB308"),n(G,"cx","8"),n(G,"cy","8"),n(G,"r","4"),n(I,"d","m8 16v-16m-7 4 14 8m0-8-14 8"),n(I,"fill","none"),n(I,"stroke","#EAB308"),n(I,"stroke-width","1"),n(q,"attributeName","transform"),n(q,"type","rotate"),n(q,"from","0 8 8"),n(q,"to","360 8 8"),n(q,"dur","12s"),n(q,"repeatCount","indefinite"),n(D,"xmlns","http://www.w3.org/2000/svg"),n(D,"viewBox","0 0 16 16"),n(H,"fill","#EAB308"),n(H,"cx","8"),n(H,"cy","8"),n(H,"r","4"),n(j,"d","m8 16v-16m-7 4 14 8m0-8-14 8"),n(j,"fill","none"),n(j,"stroke","#EAB308"),n(j,"stroke-width","1"),n(x,"attributeName","transform"),n(x,"type","rotate"),n(x,"from","0"),n(x,"to","360"),n(x,"dur","12s"),n(x,"repeatCount","indefinite"),n(R,"xmlns","http://www.w3.org/2000/svg"),n(R,"viewBox","0 0 16 16"),n(sa,"class","language-xml"),n(V,"fill","#EAB308"),n(V,"cx","8"),n(V,"cy","8"),n(V,"r","4"),n(z,"d","m8 16v-16m-7 4 14 8m0-8-14 8"),n(z,"fill","none"),n(z,"stroke","#EAB308"),n(z,"stroke-width","1"),n(b,"attributeName","transform"),n(b,"type","scale"),n(b,"values","0.5; 1.5; 0.5"),n(b,"dur","6s"),n(b,"repeatCount","indefinite"),n(L,"transform-origin","8 8"),n($,"xmlns","http://www.w3.org/2000/svg"),n($,"viewBox","0 0 16 16"),n(na,"class","language-xml"),n(Y,"fill","#EAB308"),n(Y,"cx","8"),n(Y,"cy","8"),n(Y,"r","4"),n(y,"attributeName","transform"),n(y,"type","rotate"),n(y,"from","0 8 8"),n(y,"to","360 8 8"),n(y,"dur","12s"),n(y,"repeatCount","indefinite"),n(B,"d","m8 16v-16m-7 4 14 8m0-8-14 8"),n(B,"fill","none"),n(B,"stroke","#EAB308"),n(B,"stroke-width","1"),n(C,"attributeName","transform"),n(C,"type","scale"),n(C,"values","0.5; 1.5; 0.5"),n(C,"dur","6s"),n(C,"repeatCount","indefinite"),n(U,"transform-origin","8 8"),n(F,"xmlns","http://www.w3.org/2000/svg"),n(F,"viewBox","0 0 16 16"),n(ta,"href","https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin"),n(ta,"rel","nofollow")},m(a,e){o(a,m,e),t(m,w),t(w,_),t(w,W),t(w,g),t(m,ea),t(m,va),t(va,ps),o(a,ba,e),o(a,oa,e),t(oa,es),o(a,Ba,e),o(a,A,e),t(A,os),t(A,ga),t(ga,ls),t(A,cs),o(a,Ca,e),o(a,X,e),X.innerHTML=fn,o(a,Aa,e),o(a,P,e),t(P,J),t(J,N),t(J,O),t(J,T),o(a,Pa,e),o(a,d,e),t(d,us),t(d,da),t(da,rs),t(d,is),t(d,wa),t(wa,ks),t(d,ms),t(d,ha),t(ha,fs),t(d,vs),t(d,_a),t(_a,gs),t(d,ds),t(d,Ea),t(Ea,ws),t(d,hs),t(d,qa),t(qa,_s),t(d,Es),o(a,Na,e),o(a,S,e),t(S,qs),t(S,xa),t(xa,xs),t(S,ys),o(a,Oa,e),o(a,K,e),K.innerHTML=vn,o(a,Sa,e),o(a,la,e),t(la,Ts),o(a,Da,e),o(a,Q,e),Q.innerHTML=gn,o(a,Ga,e),o(a,D,e),t(D,Z),t(Z,G),t(Z,I),t(Z,q),o(a,Ia,e),o(a,ca,e),t(ca,bs),o(a,Ra,e),o(a,R,e),t(R,aa),t(aa,H),t(aa,j),t(aa,x),o(a,Ha,e),o(a,ua,e),t(ua,Bs),o(a,ja,e),o(a,ra,e),t(ra,Cs),o(a,Ma,e),o(a,M,e),t(M,As),t(M,ya),t(ya,Ps),t(M,Ns),o(a,$a,e),o(a,ia,e),t(ia,Ta),t(Ta,Os),o(a,La,e),o(a,sa,e),sa.innerHTML=dn,o(a,Va,e),o(a,$,e),t($,L),t(L,V),t(L,z),t(L,b),o(a,za,e),o(a,ka,e),t(ka,Ss),o(a,Fa,e),o(a,na,e),na.innerHTML=wn,o(a,Ua,e),o(a,F,e),t(F,U),t(U,Y),t(U,B),t(B,y),t(U,C),o(a,Ya,e),o(a,ma,e),t(ma,ta),t(ta,Ds),o(a,Wa,e),o(a,fa,e),t(fa,Gs)},p:jn,d(a){a&&s(m),a&&s(ba),a&&s(oa),a&&s(Ba),a&&s(A),a&&s(Ca),a&&s(X),a&&s(Aa),a&&s(P),a&&s(Pa),a&&s(d),a&&s(Na),a&&s(S),a&&s(Oa),a&&s(K),a&&s(Sa),a&&s(la),a&&s(Da),a&&s(Q),a&&s(Ga),a&&s(D),a&&s(Ia),a&&s(ca),a&&s(Ra),a&&s(R),a&&s(Ha),a&&s(ua),a&&s(ja),a&&s(ra),a&&s(Ma),a&&s(M),a&&s($a),a&&s(ia),a&&s(La),a&&s(sa),a&&s(Va),a&&s($),a&&s(za),a&&s(ka),a&&s(Fa),a&&s(na),a&&s(Ua),a&&s(F),a&&s(Ya),a&&s(ma),a&&s(Wa),a&&s(fa)}}}function Ln(pa){let m,w;const _=[pa[0],mn];let W={$$slots:{default:[$n]},$$scope:{ctx:pa}};for(let g=0;g<_.length;g+=1)W=Is(W,_[g]);return m=new Mn({props:W}),{c(){Nn(m.$$.fragment)},l(g){On(m.$$.fragment,g)},m(g,E){Sn(m,g,E),w=!0},p(g,[E]){const ea=E&1?Dn(_,[E&1&&rn(g[0]),E&0&&rn(mn)]):{};E&2&&(ea.$$scope={dirty:E,ctx:g}),m.$set(ea)},i(g){w||(Gn(m.$$.fragment,g),w=!0)},o(g){In(m.$$.fragment,g),w=!1},d(g){Rn(m,g)}}}const mn={layout:"blog_layout",title:"How to Scale a SVG Element Around a Transform Origin",slug:"svg-scale-animate-transform-origin",date:"2024/04/26",updated_date:"2024/04/26",author:"Justin Golden",preview_text:"The trick to using animatetransform to scale around a center point",img:"/img/blog/circles.avif",categories:["webdev","svg"],keywords:["svg animatetransform scale transform around center","svg animatetransform scale transform around origin","svg animatetransform scale transform around point","animate svg scale","transform svg scale","svg animatetransform scale transform origin point","svg animatetransform origin point"]};function Vn(pa,m,w){return pa.$$set=_=>{w(0,m=Is(Is({},m),kn(_)))},m=kn(m),[m]}class Un extends Cn{constructor(m){super(),An(this,m,Vn,Ln,Pn,{})}}export{Un as default,mn as metadata};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.