How to scale SVG path
Question
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>
2 answers
solution1
3 ACCPTED 2016-12-22 12:33:23
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>
solution2
0 2016-12-22 15:29:57
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.