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

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -