在视口中间显示 4mm 圆圈的可靠跨浏览器 svg 方法是什么？

Question

无论我如何尝试，在移动浏览器上显示的圆都不是 4mm。我试过将 svg 嵌入 html 并使用元标记，但没有效果。我试过使用视口 css 规则，但它们似乎没有实现。我已经尝试过 Firefox mobile 和 chrome。还有其他办法吗？

Answer 1

mm 在网络世界中是一个不寻常的值，但它在 CSS.

中是有效的 length

对我来说最简单的方法是使用一个正方形 SVG viewbox，其中 circle 元素 100% wide/tall 占据整个 SVG。我相信这可以避免像素舍入。

将 SVG 放在 div 中，然后将 4mm 放在 width 中，然后根据需要居中。

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>

在视口中间显示 4mm 圆圈的可靠跨浏览器 svg 方法是什么？

What is a reliable cross browser svg way to display a 4mm circle in the middle of the viewport?

css

svg

viewport