Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scale SVG path

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>
like image 540
Sanjith Avatar asked Dec 22 '16 11:12

Sanjith


2 Answers

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>
like image 116
r3mainer Avatar answered Oct 19 '22 03:10

r3mainer


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>
like image 20
Paul LeBeau Avatar answered Oct 19 '22 05:10

Paul LeBeau