我在网页中有一个SVG圈子。它在桌面上完美呈现,但在我的移动浏览器上完全正方形。 SVG直接从Illustrator导出。
JS小提琴here IS 按照预期在桌面 和 移动设备上工作。
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<g>
<circle id="circle" fill="#202020" stroke="#0A0A0A" stroke-width="4" cx="122" cy="125" r="100"/>
<line id="hour0" fill="none" x1="122" y1="35" x2="122" y2="25"/>
<line id="hour1" fill="none" x1="172" y1="38" x2="167" y2="47"/>
<line id="hour2" x1="210" y1="75" x2="199" y2="80"/>
<line id="hour3" fill="none" x1="212" y1="125" x2="222" y2="125"/>
<line id="hour4" fill="none" x1="209" y1="175" x2="200" y2="170"/>
<line id="hour5" fill="none" x1="172" y1="212" x2="167" y2="203"/>
<line id="hour6" fill="none" x1="122" y1="215" x2="122" y2="225"/>
<line id="hour7" fill="none" x1="72" y1="212" x2="77" y2="203"/>
<line id="hour8" fill="none" x1="35" y1="175" x2="44" y2="170"/>
<line id="hour9" fill="none" x1="22" y1="125" x2="32" y2="125"/>
<line id="hour10" fill="none" x1="35" y1="75" x2="44" y2="80"/>
<line id="hour11" fill="none" x1="72" y1="38" x2="77" y2="47"/>
</g>
<g>
<line id="hourhand" fill="none" stroke="#FFFFFF" stroke-width="5" x1="122" y1="125" x2="122" y2="70"/>
<line id="minutehand" fill="none" stroke="#FFFFFF" stroke-width="3" x1="122" y1="125" x2="122" y2="40"/>
<line id="secondhand" fill="none" stroke="#823441" stroke-width="2" x1="122" y1="125" x2="122" y2="30"/>
<circle id="bolt" fill="#FFFFFF" stroke="#202020" stroke-width="4" cx="122" cy="125" r="5.5"/>
</g>
</svg>
什么可能会影响我网站上的SVG,使其仅在移动设备上呈现为正方形?
稍微过期后 - 将SVG“R”属性设置为294将其修复到我的手机上。但我仍然想知道为什么会这样......