在安卓上是这样的，浏览器模拟IOS的时候也是正常的，但是在手机上看就出问题了，有前辈遇到过这样的问题吗
1 回答
婷婷同学_
TA贡献1844条经验 获得超8个赞
在SVG外层元素的样式上，逆时针旋转90度就好了。
注意：在IOS 10.x Safari中，90deg不生效，加任意小数点即可。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="UTF-8">
<style>
#circle {
transform: rotate(-90.1deg); /* IOS 10.x Fix */
-webkit-transform: rotate(-90.1deg);
display: inline-block;
}
</style>
</head>
<body>
<span id="circle">
<svg width="100" height="100" viewBox="0 0 100 100">
<circle fill="none" stroke="#eaeaea" stroke-width="8" cx="50" cy="50" r="46"></circle>
<circle fill="none" stroke="red" stroke-width="8" stroke-miterlimit="1" stroke-dasharray="290, 290" stroke-linecap="round" cx="50" cy="50" r="46">
<animate attributeName="stroke-dashoffset" begin="0s" dur="10s" from="290" to="0" repeatCount="1"></animate>
</circle>
</svg>
</span>
</body>
</html>
添加回答
举报
0/150
提交
取消