html - SVG circle rendering as square on mobile -

html - SVG circle rendering as square on mobile -

i have svg circle within web page. it's rendering on desktop square on mobile browser. svg exported straight illustrator.

the js fiddle here is working on desktop and mobile 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 impact svg on website cause render square on mobile devices?

after little expirmenting - setting svg "r" attribute 294 fixes on mobile. still want know why case...

html css svg