css - What is a reliable cross browser svg way to display a 4mm circle in the middle of the viewport? -
no matter try, displayed circle not 4mm on mobile browser. have tried embedding svg in html , using meta tags , had no effect.. have tried using viewport css rules, seem unimplemented. have tried both firefox mobile , chrome. there other way?
mm unusual value in web world valid length in css.
the simplest method me have square svg viewbox circle element 100% wide/tall takes full svg. avoids pixel rounding believe.
place svg in div , give 4mm in width center desired.
div { width: 4mm; } /* centering method */ /* pick own */ div { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="50" style="fill:#ff0000"/> </svg> </div>
Comments
Post a Comment