Applying Scale Transform to SVG group

Question

I have provided, as an example, an SVG of a lamp I created using Sketch. I intend for the lamp's head to scale by a factor (e.g. 1.2 here) when the cursor hovers over - to indicate interactivity. The issue is, however, when hovering over the lamp head its location is also transformed. Firstly, I'd like to know what the scale is using to base its transformation on - is it the other transforms, the positional values in the ellipses/paths?

Secondly, how can I go about ensuring that scaling occurs around the origin of the group () I am interested in?

I have tried to swap out the translates for x,y positions on the elements, as well as nesting svgs to no avail. I believe there's a fundamental piece of the svg framework here I'm not quite grasping.

.interactive:hover {
  scale: 1.2;
}

<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <svg>
        <g fill="none" fill-rule="evenodd" transform="translate(0 .832)">
            <path fill="#FCFC30" fill-opacity=".35"
                  d="M283.589311,155.632129 L373.36705,522.838236 C377.564302,540.005704 367.049864,557.325232 349.882396,561.522484 C347.399779,562.129455 344.853386,562.436827 342.297648,562.438029 L162.3966,562.522631 C144.72349,562.530942 130.389866,548.210793 130.381555,530.537683 C130.380345,527.962942 130.689882,525.397465 131.303454,522.896901 L221.426762,155.606192 C225.638338,138.442233 242.966634,127.942251 260.130594,132.153828 C271.714734,134.996266 280.756541,144.04562 283.589311,155.632129 Z"
                  transform="rotate(32 252.31 295.631)"></path>
            /* This following group is the one to be made interactive */
            <g fill-rule="nonzero" transform="translate(264.313 121.836)" class="interactive" cursor="pointer">
                <ellipse fill="#EFCF6A" rx="17.298" ry="17.28" cx="41.1" cy="90.717"></ellipse>
                <path fill="#E5DBDA"
                      d="M0,68.8755609 C0,68.8755609 23.9403854,39.015945 48.4343057,32.3804748 L89.5342738,57.6782049 C89.5342738,57.6782049 95.6231579,89.4731662 76.9413543,118.641587 L0,68.8755609 Z"></path>
                <path fill="#E5DBDA"
                      d="M89.5342738,0.585513479 L97.5605301,5.2856382 C97.5605301,5.2856382 102.127193,8.32689537 100.88174,15.2388435 C97.8157022,29.5668288 94.0284052,43.7312658 89.5342738,57.6782049 L48.4343057,32.3804748 C48.4343057,32.3804748 73.6201447,6.52978886 79.0171102,2.52085895 C81.9461562,0.0899965767 85.9303942,-0.643174192 89.5342738,0.585513479 L89.5342738,0.585513479 Z"></path>
            </g>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="351.731 188.715 524.683 188.65 524.678 200.692 351.726 200.757"
                     transform="rotate(22.9 438.204 194.704)"></polygon>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="400.402 312.102 586.898 312.149 586.902 328.477 400.406 328.43"
                     transform="rotate(104.4 493.652 320.29)"></polygon>
            <ellipse cx="516.376" cy="230.602" fill="#E5DBDA" fill-rule="nonzero" rx="11.624"
                     ry="11.612"></ellipse>
            <path fill="#BFBEBA" fill-rule="nonzero"
                  d="M391.968793,463.396323 L508.764661,463.396323 C512.968159,463.396323 516.375767,466.800366 516.375767,470.999466 L516.375767,482.611539 L384.219304,482.611539 L384.219304,470.999466 C384.219304,468.958805 385.039816,467.003668 386.497246,465.573761 C387.954677,464.143853 389.926333,463.35922 391.968793,463.396323 Z"></path>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="453.273 466.714 461.299 419.022 476.521 419.022 483.164 466.714"></polygon>
            <ellipse cx="469.879" cy="414.321" fill="#E5DBDA" fill-rule="nonzero" rx="16.606"
                     ry="16.589"></ellipse>
        </g>
    </svg>
</svg>

chrwahl · Accepted Answer · 2023-01-27T07:31:26.677

First a small example. The red rectangle behaves like you lamp -- the scaling happens from 0,0 (top left corner). The "right" solution is the green. You can see that I move 0,0 to the middle of the rectangle by setting x and y to negative values. This is just one shape -- you have multiple. So, the blue rectangle is nested in more groups and the hover/scale happens on the one group that does not have a transform already (important). So instead of changing all the x,y values for all the shapes (here just the one blue rectangle) you can group and translate that group in the negative direction making 0,0 the middle of the group.

Now, go and see my edits of your drawing. I added two groups. The one scales the group and the other places 0,0 in the middle. The values are half the width and height of the entire group. If you are using an editor you can select the group/elements and see the width and height, or like I did open the dev tools in the browser and use the function getBBox() on the element/group (it returns width = 101.09695434570312 and height = 118.64158630371094 ~ 50,60). I also had to add the reverse values to the original group, so that the lamp is in place.

PS I also moved the polygon that draws the arm up above the lamp group so that is stays behind the lamp when it scales.

.hover:hover {
  scale: 1.2;
}

<svg viewBox="0 0 100 100" width="200">
  <rect class="hover" width="20" height="20" x="0" y="10" fill="red" />
  <g transform="translate(40 20)">
    <rect class="hover" width="20" height="20" x="-10" y="-10" fill="green" />
  </g>
  <g transform="translate(70 20)">
    <g class="hover">
      <g transform="translate(-10 -10)">
        <rect width="20" height="20" x="0" y="0" fill="blue" />
      </g>
    </g>
  </g>
</svg>

.interactive:hover > g {
  scale: 1.2;
}

<svg viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <svg>
        <g fill="none" fill-rule="evenodd" transform="translate(0 .832)">
            <path fill="#FCFC30" fill-opacity=".35"
                  d="M283.589311,155.632129 L373.36705,522.838236 C377.564302,540.005704 367.049864,557.325232 349.882396,561.522484 C347.399779,562.129455 344.853386,562.436827 342.297648,562.438029 L162.3966,562.522631 C144.72349,562.530942 130.389866,548.210793 130.381555,530.537683 C130.380345,527.962942 130.689882,525.397465 131.303454,522.896901 L221.426762,155.606192 C225.638338,138.442233 242.966634,127.942251 260.130594,132.153828 C271.714734,134.996266 280.756541,144.04562 283.589311,155.632129 Z"
                  transform="rotate(32 252.31 295.631)"></path>
                  <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="351.731 188.715 524.683 188.65 524.678 200.692 351.726 200.757"
                     transform="rotate(22.9 438.204 194.704)"></polygon>
            /* This following group is the one to be made interactive */
            <g fill-rule="nonzero" transform="translate(264.313 121.836) translate(50 60)" class="interactive" cursor="pointer">
            <g>
            <g transform="translate(-50 -60)">
                <ellipse fill="#EFCF6A" rx="17.298" ry="17.28" cx="41.1" cy="90.717"></ellipse>
                <path fill="#E5DBDA"
                      d="M0,68.8755609 C0,68.8755609 23.9403854,39.015945 48.4343057,32.3804748 L89.5342738,57.6782049 C89.5342738,57.6782049 95.6231579,89.4731662 76.9413543,118.641587 L0,68.8755609 Z"></path>
                <path fill="#E5DBDA"
                      d="M89.5342738,0.585513479 L97.5605301,5.2856382 C97.5605301,5.2856382 102.127193,8.32689537 100.88174,15.2388435 C97.8157022,29.5668288 94.0284052,43.7312658 89.5342738,57.6782049 L48.4343057,32.3804748 C48.4343057,32.3804748 73.6201447,6.52978886 79.0171102,2.52085895 C81.9461562,0.0899965767 85.9303942,-0.643174192 89.5342738,0.585513479 L89.5342738,0.585513479 Z"></path>
                      </g>
                      </g>
            </g>
            
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="400.402 312.102 586.898 312.149 586.902 328.477 400.406 328.43"
                     transform="rotate(104.4 493.652 320.29)"></polygon>
            <ellipse cx="516.376" cy="230.602" fill="#E5DBDA" fill-rule="nonzero" rx="11.624"
                     ry="11.612"></ellipse>
            <path fill="#BFBEBA" fill-rule="nonzero"
                  d="M391.968793,463.396323 L508.764661,463.396323 C512.968159,463.396323 516.375767,466.800366 516.375767,470.999466 L516.375767,482.611539 L384.219304,482.611539 L384.219304,470.999466 C384.219304,468.958805 385.039816,467.003668 386.497246,465.573761 C387.954677,464.143853 389.926333,463.35922 391.968793,463.396323 Z"></path>
            <polygon fill="#BFBEBA" fill-rule="nonzero"
                     points="453.273 466.714 461.299 419.022 476.521 419.022 483.164 466.714"></polygon>
            <ellipse cx="469.879" cy="414.321" fill="#E5DBDA" fill-rule="nonzero" rx="16.606"
                     ry="16.589"></ellipse>
        </g>
    </svg>
</svg>

Amazing. How did you arrive at the values for the translations (+/-50, +/-60 )? — ev350, Jan 26 '23 at 23:46

Applying Scale Transform to SVG group

1 Answers1