如何缩放SVG路径 [英] How to scale SVG path
问题描述
我尝试缩放svg路径(如element).但是，缩放对于div元素而言工作正常，而不适用于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>
推荐答案
您的代码已损坏.您无需添加<body>或<style>标签作为开始.特别是，似乎附加的<style>标记使.two类的语句无法解析.
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.
另一个问题是border之类的CSS属性不适用于SVG元素.尝试改用stroke和/或stroke-width.
Another problem is that CSS attributes like border don't apply to SVG elements. Try using stroke and/or stroke-width instead.
也许主要的问题是您的SVG内容与原点之间的偏移量很大.当将其放大2倍时，基本上就是将所有坐标加倍.结果，该图形从SVG视图框的右下角消失了.解决此问题的最简单方法是使用<g>元素重新定位SVG原点.
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.
这是一个简单的示例，其三角形位于SVG的中间:
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路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
