San*_*th 11 html javascript css svg
我试图像元素一样缩放 svg 路径。但是缩放对于 div 元素不起作用，不适用于 svg 路径元素。我在下面附上了我的代码。有什么建议吗？
<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类的语句无法解析。
另一个问题是 CSS 属性（例如）border不适用于 SVG 元素。尝试使用stroke和/或stroke-width代替。
也许主要问题是您的 SVG 内容与原点有很长的距离。当您将其放大 2 倍时，您基本上只是将所有坐标加倍。结果，绘图从 SVG 视图框的右下角消失了。解决此问题的最简单方法是使用<g>元素重新定位 SVG 原点。
这是一个简单的例子，三角形居中在 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 元素向原点缩放或远离原点缩放。默认情况下，该位置位于 SVG 的左上角。
如果您希望形状围绕形状中间的点缩放，则可以使用transform-origin设置新原点。
请参阅下面的演示。
<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>