为什么我用SVG画的圆弧在安卓上正常，在IOS上起点是从右边3点的位置开始的？
在安卓上是这样的，浏览器模拟IOS的时候也是正常的，但是在手机上看就出问题了，有前辈遇到过这样的问题吗
浏览 310回答 1
1回答
-
婷婷同学_
在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>00
相关分类