我试图缩放像元素的svg路径。但是对于div元素,缩放不能很好地工作,而对svg path元素不起作用。我在下面附加了我的代码。有什么建议吗?
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句