Quelle est une façon svg cross navigateur fiable pour afficher un cercle de 4mm dans le milieu de la fenêtre?

Question

Peu importe ce que j'essaie, le cercle affiché n'est pas de 4 mm sur un navigateur mobile. J'ai essayé d'incorporer le svg dans un HTML et en utilisant les balises meta et il n'a eu aucun effet .. J'ai essayé d'employer des règles de viewport css, mais elles semblent non implémentées. J'ai essayé à la fois Firefox Mobile et Chrome. Est-ce qu'il y a un autre moyen?

Answer 1

mm est une valeur inhabituelle dans le monde Web, mais il est valide length en CSS.

La méthode la plus simple pour moi serait d'avoir un carré SVG viewbox avec un circle élément 100% large/grand qui prend le plein SVG. Cela évite l'arrondissement des pixels, je crois.

Placer le SVG dans un div et donner 4mm dans width puis centrer comme souhaité.

div { 
 
    width: 4mm; 
 
} 
 

 

 
/* centering method */ 
 

 

 
/* but pick your 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>