[{"data":1,"prerenderedAt":1490},["ShallowReactive",2],{"docs:\u002Ftransform-basics":3},{"id":4,"title":5,"body":6,"description":1482,"extension":1483,"meta":1484,"navigation":1486,"path":1487,"seo":1488,"stem":12,"__hash__":1489},"docs\u002Ftransform-basics.md","Transform basics",{"type":7,"value":8,"toc":1474},"minimark",[9,14,23,28,35,501,504,508,522,600,606,697,700,704,711,885,888,892,898,1112,1119,1123,1136,1449,1452,1457,1461,1470],[10,11,13],"h1",{"id":12},"transform-basics","Transform Basics",[15,16,17,18,22],"p",{},"Use transforms when geometry should stay local, but its rendered position,\nrotation, or scale should change. In pyDreamplet, the most common pattern is to\nappend elements to a ",[19,20,21],"code",{},"G"," group and transform the group.",[24,25,27],"h2",{"id":26},"local-coordinates","Local Coordinates",[15,29,30,31,34],{},"A group creates a local coordinate system for its children. The elements inside\nthe group can be drawn around ",[19,32,33],{},"(0, 0)",", then the group can be moved as a single\nunit.",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","import pydreamplet as dp\n\nsvg = dp.SVG(540, 360)\n\norigin = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2))\nsvg.append(origin)\n\norigin.append(dp.Circle(cx=0, cy=0, r=6, fill=\"#14b8a6\"))\norigin.append(\n    dp.Line(\n        x1=-120,\n        y1=0,\n        x2=120,\n        y2=0,\n        stroke=\"currentColor\",\n        stroke_width=3,\n        opacity=0.45,\n    )\n)\norigin.append(\n    dp.Line(\n        x1=0,\n        y1=-120,\n        x2=0,\n        y2=120,\n        stroke=\"currentColor\",\n        stroke_width=3,\n        opacity=0.28,\n    )\n)\n","python","",[19,43,44,63,70,107,112,168,185,190,257,269,282,297,309,321,333,350,363,376,382,387,398,409,420,431,442,453,468,479,491,496],{"__ignoreMap":41},[45,46,49,53,57,60],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"sED7I","import",[45,54,56],{"class":55},"soTeR"," pydreamplet ",[45,58,59],{"class":51},"as",[45,61,62],{"class":55}," dp\n",[45,64,66],{"class":47,"line":65},2,[45,67,69],{"emptyLinePlaceholder":68},true,"\n",[45,71,73,76,80,83,87,91,94,98,101,104],{"class":47,"line":72},3,[45,74,75],{"class":55},"svg ",[45,77,79],{"class":78},"sWKEy","=",[45,81,82],{"class":55}," dp",[45,84,86],{"class":85},"sVsmf",".",[45,88,90],{"class":89},"sAK04","SVG",[45,92,93],{"class":85},"(",[45,95,97],{"class":96},"sNpir","540",[45,99,100],{"class":85},",",[45,102,103],{"class":96}," 360",[45,105,106],{"class":85},")\n",[45,108,110],{"class":47,"line":109},4,[45,111,69],{"emptyLinePlaceholder":68},[45,113,115,118,120,122,124,126,128,132,134,136,139,141,145,148,151,153,156,158,161,163,165],{"class":47,"line":114},5,[45,116,117],{"class":55},"origin ",[45,119,79],{"class":78},[45,121,82],{"class":55},[45,123,86],{"class":85},[45,125,21],{"class":89},[45,127,93],{"class":85},[45,129,131],{"class":130},"sYEV4","pos",[45,133,79],{"class":78},[45,135,93],{"class":85},[45,137,138],{"class":89},"svg",[45,140,86],{"class":85},[45,142,144],{"class":143},"sm80-","w",[45,146,147],{"class":78}," \u002F",[45,149,150],{"class":96}," 2",[45,152,100],{"class":85},[45,154,155],{"class":89}," svg",[45,157,86],{"class":85},[45,159,160],{"class":143},"h",[45,162,147],{"class":78},[45,164,150],{"class":96},[45,166,167],{"class":85},"))\n",[45,169,171,173,175,178,180,183],{"class":47,"line":170},6,[45,172,138],{"class":55},[45,174,86],{"class":85},[45,176,177],{"class":89},"append",[45,179,93],{"class":85},[45,181,182],{"class":89},"origin",[45,184,106],{"class":85},[45,186,188],{"class":47,"line":187},7,[45,189,69],{"emptyLinePlaceholder":68},[45,191,193,195,197,199,201,204,206,209,211,214,216,219,221,224,226,228,230,233,235,238,240,243,245,249,253,255],{"class":47,"line":192},8,[45,194,182],{"class":55},[45,196,86],{"class":85},[45,198,177],{"class":89},[45,200,93],{"class":85},[45,202,203],{"class":89},"dp",[45,205,86],{"class":85},[45,207,208],{"class":89},"Circle",[45,210,93],{"class":85},[45,212,213],{"class":130},"cx",[45,215,79],{"class":78},[45,217,218],{"class":96},"0",[45,220,100],{"class":85},[45,222,223],{"class":130}," cy",[45,225,79],{"class":78},[45,227,218],{"class":96},[45,229,100],{"class":85},[45,231,232],{"class":130}," r",[45,234,79],{"class":78},[45,236,237],{"class":96},"6",[45,239,100],{"class":85},[45,241,242],{"class":130}," fill",[45,244,79],{"class":78},[45,246,248],{"class":247},"sqo_7","\"",[45,250,252],{"class":251},"s_jvP","#14b8a6",[45,254,248],{"class":247},[45,256,167],{"class":85},[45,258,260,262,264,266],{"class":47,"line":259},9,[45,261,182],{"class":55},[45,263,86],{"class":85},[45,265,177],{"class":89},[45,267,268],{"class":85},"(\n",[45,270,272,275,277,280],{"class":47,"line":271},10,[45,273,274],{"class":89},"    dp",[45,276,86],{"class":85},[45,278,279],{"class":89},"Line",[45,281,268],{"class":85},[45,283,285,288,291,294],{"class":47,"line":284},11,[45,286,287],{"class":130},"        x1",[45,289,290],{"class":78},"=-",[45,292,293],{"class":96},"120",[45,295,296],{"class":85},",\n",[45,298,300,303,305,307],{"class":47,"line":299},12,[45,301,302],{"class":130},"        y1",[45,304,79],{"class":78},[45,306,218],{"class":96},[45,308,296],{"class":85},[45,310,312,315,317,319],{"class":47,"line":311},13,[45,313,314],{"class":130},"        x2",[45,316,79],{"class":78},[45,318,293],{"class":96},[45,320,296],{"class":85},[45,322,324,327,329,331],{"class":47,"line":323},14,[45,325,326],{"class":130},"        y2",[45,328,79],{"class":78},[45,330,218],{"class":96},[45,332,296],{"class":85},[45,334,336,339,341,343,346,348],{"class":47,"line":335},15,[45,337,338],{"class":130},"        stroke",[45,340,79],{"class":78},[45,342,248],{"class":247},[45,344,345],{"class":251},"currentColor",[45,347,248],{"class":247},[45,349,296],{"class":85},[45,351,353,356,358,361],{"class":47,"line":352},16,[45,354,355],{"class":130},"        stroke_width",[45,357,79],{"class":78},[45,359,360],{"class":96},"3",[45,362,296],{"class":85},[45,364,366,369,371,374],{"class":47,"line":365},17,[45,367,368],{"class":130},"        opacity",[45,370,79],{"class":78},[45,372,373],{"class":96},"0.45",[45,375,296],{"class":85},[45,377,379],{"class":47,"line":378},18,[45,380,381],{"class":85},"    )\n",[45,383,385],{"class":47,"line":384},19,[45,386,106],{"class":85},[45,388,390,392,394,396],{"class":47,"line":389},20,[45,391,182],{"class":55},[45,393,86],{"class":85},[45,395,177],{"class":89},[45,397,268],{"class":85},[45,399,401,403,405,407],{"class":47,"line":400},21,[45,402,274],{"class":89},[45,404,86],{"class":85},[45,406,279],{"class":89},[45,408,268],{"class":85},[45,410,412,414,416,418],{"class":47,"line":411},22,[45,413,287],{"class":130},[45,415,79],{"class":78},[45,417,218],{"class":96},[45,419,296],{"class":85},[45,421,423,425,427,429],{"class":47,"line":422},23,[45,424,302],{"class":130},[45,426,290],{"class":78},[45,428,293],{"class":96},[45,430,296],{"class":85},[45,432,434,436,438,440],{"class":47,"line":433},24,[45,435,314],{"class":130},[45,437,79],{"class":78},[45,439,218],{"class":96},[45,441,296],{"class":85},[45,443,445,447,449,451],{"class":47,"line":444},25,[45,446,326],{"class":130},[45,448,79],{"class":78},[45,450,293],{"class":96},[45,452,296],{"class":85},[45,454,456,458,460,462,464,466],{"class":47,"line":455},26,[45,457,338],{"class":130},[45,459,79],{"class":78},[45,461,248],{"class":247},[45,463,345],{"class":251},[45,465,248],{"class":247},[45,467,296],{"class":85},[45,469,471,473,475,477],{"class":47,"line":470},27,[45,472,355],{"class":130},[45,474,79],{"class":78},[45,476,360],{"class":96},[45,478,296],{"class":85},[45,480,482,484,486,489],{"class":47,"line":481},28,[45,483,368],{"class":130},[45,485,79],{"class":78},[45,487,488],{"class":96},"0.28",[45,490,296],{"class":85},[45,492,494],{"class":47,"line":493},29,[45,495,381],{"class":85},[45,497,499],{"class":47,"line":498},30,[45,500,106],{"class":85},[15,502,503],{},"The group is centered on the canvas, but its children still use coordinates\nrelative to the group origin.",[24,505,507],{"id":506},"vector-placement","Vector Placement",[15,509,510,511,513,514,517,518,521],{},"Many shape constructors accept ",[19,512,131],{},", and ",[19,515,516],{},"G.pos"," is a ",[19,519,520],{},"Vector",". Vector math is\nuseful when you want to build geometry around a local origin.",[36,523,525],{"className":38,"code":524,"language":40,"meta":41,"style":41},"circle_pos = dp.Vector(110, 0)\norigin.append(dp.Circle(pos=circle_pos, r=12, fill=\"#14b8a6\"))\n",[19,526,527,552],{"__ignoreMap":41},[45,528,529,532,534,536,538,540,542,545,547,550],{"class":47,"line":48},[45,530,531],{"class":55},"circle_pos ",[45,533,79],{"class":78},[45,535,82],{"class":55},[45,537,86],{"class":85},[45,539,520],{"class":89},[45,541,93],{"class":85},[45,543,544],{"class":96},"110",[45,546,100],{"class":85},[45,548,549],{"class":96}," 0",[45,551,106],{"class":85},[45,553,554,556,558,560,562,564,566,568,570,572,574,577,579,581,583,586,588,590,592,594,596,598],{"class":47,"line":65},[45,555,182],{"class":55},[45,557,86],{"class":85},[45,559,177],{"class":89},[45,561,93],{"class":85},[45,563,203],{"class":89},[45,565,86],{"class":85},[45,567,208],{"class":89},[45,569,93],{"class":85},[45,571,131],{"class":130},[45,573,79],{"class":78},[45,575,576],{"class":89},"circle_pos",[45,578,100],{"class":85},[45,580,232],{"class":130},[45,582,79],{"class":78},[45,584,585],{"class":96},"12",[45,587,100],{"class":85},[45,589,242],{"class":130},[45,591,79],{"class":78},[45,593,248],{"class":247},[45,595,252],{"class":251},[45,597,248],{"class":247},[45,599,167],{"class":85},[15,601,602,605],{},[19,603,604],{},"Vector.direction"," is expressed in degrees. Updating it rotates the vector while\nkeeping its magnitude, which makes radial placement concise.",[36,607,609],{"className":38,"code":608,"language":40,"meta":41,"style":41},"for _ in range(4):\n    circle_pos.direction += 72\n    origin.append(dp.Circle(pos=circle_pos, r=12, fill=\"#14b8a6\"))\n",[19,610,611,634,650],{"__ignoreMap":41},[45,612,613,616,619,622,626,628,631],{"class":47,"line":48},[45,614,615],{"class":51},"for",[45,617,618],{"class":55}," _ ",[45,620,621],{"class":51},"in",[45,623,625],{"class":624},"sBTIf"," range",[45,627,93],{"class":85},[45,629,630],{"class":96},"4",[45,632,633],{"class":85},"):\n",[45,635,636,639,641,644,647],{"class":47,"line":65},[45,637,638],{"class":55},"    circle_pos",[45,640,86],{"class":85},[45,642,643],{"class":143},"direction",[45,645,646],{"class":78}," +=",[45,648,649],{"class":96}," 72\n",[45,651,652,655,657,659,661,663,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693,695],{"class":47,"line":72},[45,653,654],{"class":55},"    origin",[45,656,86],{"class":85},[45,658,177],{"class":89},[45,660,93],{"class":85},[45,662,203],{"class":89},[45,664,86],{"class":85},[45,666,208],{"class":89},[45,668,93],{"class":85},[45,670,131],{"class":130},[45,672,79],{"class":78},[45,674,576],{"class":89},[45,676,100],{"class":85},[45,678,232],{"class":130},[45,680,79],{"class":78},[45,682,585],{"class":96},[45,684,100],{"class":85},[45,686,242],{"class":130},[45,688,79],{"class":78},[45,690,248],{"class":247},[45,692,252],{"class":251},[45,694,248],{"class":247},[45,696,167],{"class":85},[15,698,699],{},"This is the same pattern used for radial marks, circular layouts, and animated\ndesigns where each element starts from a rotated copy of the same vector.",[24,701,703],{"id":702},"rotation","Rotation",[15,705,706,707,710],{},"Set ",[19,708,709],{},"angle"," on a group to rotate everything inside it.",[36,712,714],{"className":38,"code":713,"language":40,"meta":41,"style":41},"needle = dp.G(angle=-45)\norigin.append(needle)\n\nneedle.append(\n    dp.Rect(\n        x=-12,\n        y=-118,\n        width=24,\n        height=110,\n        rx=12,\n        fill=\"#38bdf8\",\n        stroke=\"currentColor\",\n        stroke_width=4,\n    )\n)\n",[19,715,716,740,755,759,769,780,791,803,815,826,837,853,867,877,881],{"__ignoreMap":41},[45,717,718,721,723,725,727,729,731,733,735,738],{"class":47,"line":48},[45,719,720],{"class":55},"needle ",[45,722,79],{"class":78},[45,724,82],{"class":55},[45,726,86],{"class":85},[45,728,21],{"class":89},[45,730,93],{"class":85},[45,732,709],{"class":130},[45,734,290],{"class":78},[45,736,737],{"class":96},"45",[45,739,106],{"class":85},[45,741,742,744,746,748,750,753],{"class":47,"line":65},[45,743,182],{"class":55},[45,745,86],{"class":85},[45,747,177],{"class":89},[45,749,93],{"class":85},[45,751,752],{"class":89},"needle",[45,754,106],{"class":85},[45,756,757],{"class":47,"line":72},[45,758,69],{"emptyLinePlaceholder":68},[45,760,761,763,765,767],{"class":47,"line":109},[45,762,752],{"class":55},[45,764,86],{"class":85},[45,766,177],{"class":89},[45,768,268],{"class":85},[45,770,771,773,775,778],{"class":47,"line":114},[45,772,274],{"class":89},[45,774,86],{"class":85},[45,776,777],{"class":89},"Rect",[45,779,268],{"class":85},[45,781,782,785,787,789],{"class":47,"line":170},[45,783,784],{"class":130},"        x",[45,786,290],{"class":78},[45,788,585],{"class":96},[45,790,296],{"class":85},[45,792,793,796,798,801],{"class":47,"line":187},[45,794,795],{"class":130},"        y",[45,797,290],{"class":78},[45,799,800],{"class":96},"118",[45,802,296],{"class":85},[45,804,805,808,810,813],{"class":47,"line":192},[45,806,807],{"class":130},"        width",[45,809,79],{"class":78},[45,811,812],{"class":96},"24",[45,814,296],{"class":85},[45,816,817,820,822,824],{"class":47,"line":259},[45,818,819],{"class":130},"        height",[45,821,79],{"class":78},[45,823,544],{"class":96},[45,825,296],{"class":85},[45,827,828,831,833,835],{"class":47,"line":271},[45,829,830],{"class":130},"        rx",[45,832,79],{"class":78},[45,834,585],{"class":96},[45,836,296],{"class":85},[45,838,839,842,844,846,849,851],{"class":47,"line":284},[45,840,841],{"class":130},"        fill",[45,843,79],{"class":78},[45,845,248],{"class":247},[45,847,848],{"class":251},"#38bdf8",[45,850,248],{"class":247},[45,852,296],{"class":85},[45,854,855,857,859,861,863,865],{"class":47,"line":299},[45,856,338],{"class":130},[45,858,79],{"class":78},[45,860,248],{"class":247},[45,862,345],{"class":251},[45,864,248],{"class":247},[45,866,296],{"class":85},[45,868,869,871,873,875],{"class":47,"line":311},[45,870,355],{"class":130},[45,872,79],{"class":78},[45,874,630],{"class":96},[45,876,296],{"class":85},[45,878,879],{"class":47,"line":323},[45,880,381],{"class":85},[45,882,883],{"class":47,"line":335},[45,884,106],{"class":85},[15,886,887],{},"This keeps the shape simple. The rectangle is still defined vertically around\nthe local origin, and the group handles the rotation.",[24,889,891],{"id":890},"scale-and-pivot","Scale And Pivot",[15,893,894,895,897],{},"Scaling and rotation happen around the group pivot. The default pivot is\n",[19,896,33],{},", which is usually what you want when the group is drawn around its own\norigin.",[36,899,901],{"className":38,"code":900,"language":40,"meta":41,"style":41},"markers = dp.G(scale=dp.Vector(1.15, 1.15))\norigin.append(markers)\n\nfor angle in range(0, 360, 45):\n    mark = dp.G(angle=angle)\n    mark.append(\n        dp.Circle(cx=0, cy=-140, r=8, fill=\"#f83898\", stroke=\"currentColor\", stroke_width=3)\n    )\n    markers.append(mark)\n",[19,902,903,941,956,960,986,1009,1020,1092,1096],{"__ignoreMap":41},[45,904,905,908,910,912,914,916,918,921,923,925,927,929,931,934,936,939],{"class":47,"line":48},[45,906,907],{"class":55},"markers ",[45,909,79],{"class":78},[45,911,82],{"class":55},[45,913,86],{"class":85},[45,915,21],{"class":89},[45,917,93],{"class":85},[45,919,920],{"class":130},"scale",[45,922,79],{"class":78},[45,924,203],{"class":89},[45,926,86],{"class":85},[45,928,520],{"class":89},[45,930,93],{"class":85},[45,932,933],{"class":96},"1.15",[45,935,100],{"class":85},[45,937,938],{"class":96}," 1.15",[45,940,167],{"class":85},[45,942,943,945,947,949,951,954],{"class":47,"line":65},[45,944,182],{"class":55},[45,946,86],{"class":85},[45,948,177],{"class":89},[45,950,93],{"class":85},[45,952,953],{"class":89},"markers",[45,955,106],{"class":85},[45,957,958],{"class":47,"line":72},[45,959,69],{"emptyLinePlaceholder":68},[45,961,962,964,967,969,971,973,975,977,979,981,984],{"class":47,"line":109},[45,963,615],{"class":51},[45,965,966],{"class":55}," angle ",[45,968,621],{"class":51},[45,970,625],{"class":624},[45,972,93],{"class":85},[45,974,218],{"class":96},[45,976,100],{"class":85},[45,978,103],{"class":96},[45,980,100],{"class":85},[45,982,983],{"class":96}," 45",[45,985,633],{"class":85},[45,987,988,991,993,995,997,999,1001,1003,1005,1007],{"class":47,"line":114},[45,989,990],{"class":55},"    mark ",[45,992,79],{"class":78},[45,994,82],{"class":55},[45,996,86],{"class":85},[45,998,21],{"class":89},[45,1000,93],{"class":85},[45,1002,709],{"class":130},[45,1004,79],{"class":78},[45,1006,709],{"class":89},[45,1008,106],{"class":85},[45,1010,1011,1014,1016,1018],{"class":47,"line":170},[45,1012,1013],{"class":55},"    mark",[45,1015,86],{"class":85},[45,1017,177],{"class":89},[45,1019,268],{"class":85},[45,1021,1022,1025,1027,1029,1031,1033,1035,1037,1039,1041,1043,1046,1048,1050,1052,1055,1057,1059,1061,1063,1066,1068,1070,1073,1075,1077,1079,1081,1083,1086,1088,1090],{"class":47,"line":187},[45,1023,1024],{"class":89},"        dp",[45,1026,86],{"class":85},[45,1028,208],{"class":89},[45,1030,93],{"class":85},[45,1032,213],{"class":130},[45,1034,79],{"class":78},[45,1036,218],{"class":96},[45,1038,100],{"class":85},[45,1040,223],{"class":130},[45,1042,290],{"class":78},[45,1044,1045],{"class":96},"140",[45,1047,100],{"class":85},[45,1049,232],{"class":130},[45,1051,79],{"class":78},[45,1053,1054],{"class":96},"8",[45,1056,100],{"class":85},[45,1058,242],{"class":130},[45,1060,79],{"class":78},[45,1062,248],{"class":247},[45,1064,1065],{"class":251},"#f83898",[45,1067,248],{"class":247},[45,1069,100],{"class":85},[45,1071,1072],{"class":130}," stroke",[45,1074,79],{"class":78},[45,1076,248],{"class":247},[45,1078,345],{"class":251},[45,1080,248],{"class":247},[45,1082,100],{"class":85},[45,1084,1085],{"class":130}," stroke_width",[45,1087,79],{"class":78},[45,1089,360],{"class":96},[45,1091,106],{"class":85},[45,1093,1094],{"class":47,"line":192},[45,1095,381],{"class":85},[45,1097,1098,1101,1103,1105,1107,1110],{"class":47,"line":259},[45,1099,1100],{"class":55},"    markers",[45,1102,86],{"class":85},[45,1104,177],{"class":89},[45,1106,93],{"class":85},[45,1108,1109],{"class":89},"mark",[45,1111,106],{"class":85},[15,1113,1114,1115,1118],{},"When the pivot needs to be somewhere else, set ",[19,1116,1117],{},"pivot=(x, y)"," explicitly.",[24,1120,1122],{"id":1121},"transform-order","Transform Order",[15,1124,1125,1127,1128,1131,1132,1135],{},[19,1126,21],{}," exposes an ",[19,1129,1130],{},"order"," property for transform composition. The default is\n",[19,1133,1134],{},"\"trs\"",", which applies translation, then rotation, then scale.",[36,1137,1139],{"className":38,"code":1138,"language":40,"meta":41,"style":41},"badge = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2), angle=-45, scale=dp.Vector(1.2, 1.2), order=\"trs\")\nbadge.append(dp.Rect(x=-42, y=-24, width=84, height=48, rx=10, fill=\"#95cf20\"))\nbadge.append(\n    dp.Text(\n        \"trs\",\n        x=0,\n        y=0,\n        fill=\"currentColor\",\n        font_size=18,\n        text_anchor=\"middle\",\n        alignment_baseline=\"middle\",\n    )\n)\n\nsvg.append(badge)\n",[19,1140,1141,1233,1314,1324,1335,1346,1356,1366,1380,1392,1408,1423,1427,1431,1435],{"__ignoreMap":41},[45,1142,1143,1146,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1187,1190,1192,1194,1196,1199,1201,1203,1205,1207,1209,1212,1214,1217,1219,1222,1224,1226,1229,1231],{"class":47,"line":48},[45,1144,1145],{"class":55},"badge ",[45,1147,79],{"class":78},[45,1149,82],{"class":55},[45,1151,86],{"class":85},[45,1153,21],{"class":89},[45,1155,93],{"class":85},[45,1157,131],{"class":130},[45,1159,79],{"class":78},[45,1161,93],{"class":85},[45,1163,138],{"class":89},[45,1165,86],{"class":85},[45,1167,144],{"class":143},[45,1169,147],{"class":78},[45,1171,150],{"class":96},[45,1173,100],{"class":85},[45,1175,155],{"class":89},[45,1177,86],{"class":85},[45,1179,160],{"class":143},[45,1181,147],{"class":78},[45,1183,150],{"class":96},[45,1185,1186],{"class":85},"),",[45,1188,1189],{"class":130}," angle",[45,1191,290],{"class":78},[45,1193,737],{"class":96},[45,1195,100],{"class":85},[45,1197,1198],{"class":130}," scale",[45,1200,79],{"class":78},[45,1202,203],{"class":89},[45,1204,86],{"class":85},[45,1206,520],{"class":89},[45,1208,93],{"class":85},[45,1210,1211],{"class":96},"1.2",[45,1213,100],{"class":85},[45,1215,1216],{"class":96}," 1.2",[45,1218,1186],{"class":85},[45,1220,1221],{"class":130}," order",[45,1223,79],{"class":78},[45,1225,248],{"class":247},[45,1227,1228],{"class":251},"trs",[45,1230,248],{"class":247},[45,1232,106],{"class":85},[45,1234,1235,1238,1240,1242,1244,1246,1248,1250,1252,1255,1257,1260,1262,1265,1267,1269,1271,1274,1276,1279,1281,1284,1286,1289,1291,1294,1296,1299,1301,1303,1305,1307,1310,1312],{"class":47,"line":65},[45,1236,1237],{"class":55},"badge",[45,1239,86],{"class":85},[45,1241,177],{"class":89},[45,1243,93],{"class":85},[45,1245,203],{"class":89},[45,1247,86],{"class":85},[45,1249,777],{"class":89},[45,1251,93],{"class":85},[45,1253,1254],{"class":130},"x",[45,1256,290],{"class":78},[45,1258,1259],{"class":96},"42",[45,1261,100],{"class":85},[45,1263,1264],{"class":130}," y",[45,1266,290],{"class":78},[45,1268,812],{"class":96},[45,1270,100],{"class":85},[45,1272,1273],{"class":130}," width",[45,1275,79],{"class":78},[45,1277,1278],{"class":96},"84",[45,1280,100],{"class":85},[45,1282,1283],{"class":130}," height",[45,1285,79],{"class":78},[45,1287,1288],{"class":96},"48",[45,1290,100],{"class":85},[45,1292,1293],{"class":130}," rx",[45,1295,79],{"class":78},[45,1297,1298],{"class":96},"10",[45,1300,100],{"class":85},[45,1302,242],{"class":130},[45,1304,79],{"class":78},[45,1306,248],{"class":247},[45,1308,1309],{"class":251},"#95cf20",[45,1311,248],{"class":247},[45,1313,167],{"class":85},[45,1315,1316,1318,1320,1322],{"class":47,"line":72},[45,1317,1237],{"class":55},[45,1319,86],{"class":85},[45,1321,177],{"class":89},[45,1323,268],{"class":85},[45,1325,1326,1328,1330,1333],{"class":47,"line":109},[45,1327,274],{"class":89},[45,1329,86],{"class":85},[45,1331,1332],{"class":89},"Text",[45,1334,268],{"class":85},[45,1336,1337,1340,1342,1344],{"class":47,"line":114},[45,1338,1339],{"class":247},"        \"",[45,1341,1228],{"class":251},[45,1343,248],{"class":247},[45,1345,296],{"class":85},[45,1347,1348,1350,1352,1354],{"class":47,"line":170},[45,1349,784],{"class":130},[45,1351,79],{"class":78},[45,1353,218],{"class":96},[45,1355,296],{"class":85},[45,1357,1358,1360,1362,1364],{"class":47,"line":187},[45,1359,795],{"class":130},[45,1361,79],{"class":78},[45,1363,218],{"class":96},[45,1365,296],{"class":85},[45,1367,1368,1370,1372,1374,1376,1378],{"class":47,"line":192},[45,1369,841],{"class":130},[45,1371,79],{"class":78},[45,1373,248],{"class":247},[45,1375,345],{"class":251},[45,1377,248],{"class":247},[45,1379,296],{"class":85},[45,1381,1382,1385,1387,1390],{"class":47,"line":259},[45,1383,1384],{"class":130},"        font_size",[45,1386,79],{"class":78},[45,1388,1389],{"class":96},"18",[45,1391,296],{"class":85},[45,1393,1394,1397,1399,1401,1404,1406],{"class":47,"line":271},[45,1395,1396],{"class":130},"        text_anchor",[45,1398,79],{"class":78},[45,1400,248],{"class":247},[45,1402,1403],{"class":251},"middle",[45,1405,248],{"class":247},[45,1407,296],{"class":85},[45,1409,1410,1413,1415,1417,1419,1421],{"class":47,"line":284},[45,1411,1412],{"class":130},"        alignment_baseline",[45,1414,79],{"class":78},[45,1416,248],{"class":247},[45,1418,1403],{"class":251},[45,1420,248],{"class":247},[45,1422,296],{"class":85},[45,1424,1425],{"class":47,"line":299},[45,1426,381],{"class":85},[45,1428,1429],{"class":47,"line":311},[45,1430,106],{"class":85},[45,1432,1433],{"class":47,"line":323},[45,1434,69],{"emptyLinePlaceholder":68},[45,1436,1437,1439,1441,1443,1445,1447],{"class":47,"line":335},[45,1438,138],{"class":55},[45,1440,86],{"class":85},[45,1442,177],{"class":89},[45,1444,93],{"class":85},[45,1446,1237],{"class":89},[45,1448,106],{"class":85},[15,1450,1451],{},"Changing the order can produce a visibly different result, especially when\ntranslation, rotation, and non-uniform scale are combined.",[1453,1454],"svg-preview",{"alt":1455,"src":1456},"Example SVG generated from the transform basics code","\u002Fshowcase\u002Ftransform_basics_01.svg",[24,1458,1460],{"id":1459},"next","Next",[15,1462,1463,1464,1469],{},"Continue with ",[1465,1466,1468],"a",{"href":1467},"\u002Ftext-basics","Text basics"," to place, align, and measure SVG\ntext.",[1471,1472,1473],"style",{},"html pre.shiki code .sED7I, html code.shiki .sED7I{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#A0111F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .soTeR, html code.shiki .soTeR{--shiki-light:#90A4AE;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sWKEy, html code.shiki .sWKEy{--shiki-light:#39ADB5;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .sVsmf, html code.shiki .sVsmf{--shiki-light:#39ADB5;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sAK04, html code.shiki .sAK04{--shiki-light:#6182B8;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sNpir, html code.shiki .sNpir{--shiki-light:#F76D47;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sYEV4, html code.shiki .sYEV4{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#702C00;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sm80-, html code.shiki .sm80-{--shiki-light:#E53935;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sqo_7, html code.shiki .sqo_7{--shiki-light:#39ADB5;--shiki-default:#032563;--shiki-dark:#9ECBFF}html pre.shiki code .s_jvP, html code.shiki .s_jvP{--shiki-light:#91B859;--shiki-default:#032563;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--shiki-default:#023B95;--shiki-dark:#79B8FF}",{"title":41,"searchDepth":72,"depth":72,"links":1475},[1476,1477,1478,1479,1480,1481],{"id":26,"depth":65,"text":27},{"id":506,"depth":65,"text":507},{"id":702,"depth":65,"text":703},{"id":890,"depth":65,"text":891},{"id":1121,"depth":65,"text":1122},{"id":1459,"depth":65,"text":1460},"Move, rotate, and scale SVG elements with groups and vectors.","md",{"category":1485},"guide",{"title":5},"\u002Ftransform-basics",{"title":5,"description":1482},"xL47wpvcdh-7GdP-AVxpgCbmK7ITI8U2YznoqsEZLPI",1780692544905]