How to scale SVG path

javascript html css svg

53,900

Solution 1

Your code is rather broken. You don't need to add <body> or <style> tags for a start. In particular, it looks like the additional <style> tag has made the statements for the .two class impossible to parse.

Another problem is that CSS attributes like border don't apply to SVG elements. Try using stroke and/or stroke-width instead.

Perhaps the main problem is that your SVG content is offset quite a long way from the origin. When you scale it up by a factor of 2, you're basically just doubling all the coordinates. As a result, the drawing is disappearing off the bottom right corner of the SVG view box. The simplest way to fix this is to use a <g> element to reposition the SVG origin.

Here's a simple example with a triangle centred in the middle of the SVG:

.two {
  transition: all 2s ease-in-out 0.5s;
  -webkit-transition: all 2s ease-in-out 0.5s;
}
#scale {
  height: 150px;
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
#scale {
  fill: yellow;
  stroke: blue;
  stroke-width: 2px;
}
.grow:hover {
  transform: scale(2.0);
  -ms-transform: scale(2.0);
  -webkit-transform: scale(2.0);
}

<svg width="220" height="220">
  <g transform="translate(110,110)">
    <path d="M0 -43.3 50 43.3 -50 43.3Z"
          id="scale" class="two grow" />
  </g>
</svg>

Solution 2

SVG elements scale towards or away from the origin. By default that is the top-left of the SVG.

If you want your shape to scale around a point in the middle of your shape, then you can use transform-origin to set the new origin.

See demo below.

<style>
    .two {
        transition: all 2s ease-in-out 0.5s;
        -webkit-transition: all 2s ease-in-out 0.5s;
    }
    
    #scale {
        height: 150px;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
    
    #scale {
        border: 1px blue solid;
    }
    
    .grow:hover {
        transform-origin: 707px 287px;
        transform: scale(2.0);
        -ms-transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
</style>

<body>
    <svg width="1350" height="900">
        <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path>
    </svg>
</body>

53,900

Author by

Sanjith

Updated on July 19, 2022

Comments

Sanjith almost 2 years

I have tried to scale the svg path like element. But scaling is working fine for div element not working for svg path element. I have attached my code below. Any suggestion?

<style>
    .two {
        transition: all 2s ease-in-out 0.5s;
        -webkit-transition: all 2s ease-in-out 0.5s;
    }
    
    #scale {
        height: 150px;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
    
    #scale {
        border: 1px blue solid;
    }
    
    .grow:hover {
        transform: scale(2.0);
        -ms-transform: scale(2.0);
        -webkit-transform: scale(2.0);
    }
</style>

<body>
    <svg width="1350" height="900">
        <path d="M 673 248.625 A 67.875 67.875 0 0 1 740.1841400272543 326.159552463664 L 673 316.5 A 0 0 1 0 0 673 316.5 z" id="scale" class="two grow"></path>
    </svg>
</body>

Sanjith over 7 years

Thanks for your suggestion. This works fine in chrome browser. But in Internet Explorer it is not working. How to achieve this in IE?
JAT86 about 6 years

Where does the 110,110 from <g transform="translate(110,110)"> come from?
r3mainer about 6 years

@JAT86 That places the coordinate origin at the centre of the viewBox (which is 220 wide and 220 tall). The triangle is drawn centred on this origin, so when its scale is changed, it grows without moving anywhere. (The scale transform multiplies all the coordinates by the same quantity, so if the origin was still at the top left of the SVG canvas, then the triangle would zoom off to the bottom right when it is scaled up in size.)