Menu
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>
540
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
