SVG circle rendering as square on mobile

2019-05-30 15:46发布

I have an SVG circle inside a web page. It's rendering perfectly on desktop but completely square on my mobile browser. The SVG is exported directly from illustrator.

The JS Fiddle here IS working on my desktop AND mobile as intended.

<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>

What could impact the SVG on my website to cause it to render as a square only on mobile devices?

After a little expirmenting - setting the SVG "R" attribute to 294 fixes it on my mobile. But I still want to know why this is the case...

标签: html css svg
0条回答
登录 后发表回答