什么是可靠的跨浏览器svg方式在视口中间显示4毫米的圆圈？
问题描述：
无论我尝试什么，在移动浏览器上显示的圆不是4毫米。我试图嵌入SVG在HTML和使用元标记，它没有影响..我已经尝试使用视口的CSS规则，但他们似乎未实现。我已经尝试过Firefox手机和Chrome。有没有其他方法？什么是可靠的跨浏览器svg方式在视口中间显示4毫米的圆圈？
答
mm在网络世界中是一个不寻常的价值，但它是一个在CSS中有效的length。
对我来说，最简单的方法是将一个方形的SVG viewbox与一个circle元素100％宽/高，占用全部SVG。这避免了我相信的像素舍入。
将SVG放在一个div中，并给4mmwidth，然后根据需要居中。
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>
也许你应该张贴你尝试过什么。 – pvg
感谢所有宝贵的指导。问题是我尝试了多种方法。 – kamathln
Paulie_D天才！谢谢 – kamathln