HTML嵌入SVG设置100pt却显示约133px宽度原因及解决咨询

你遇到的宽度不符问题是因为SVG标签里用的长度单位是pt而非px：

• 网页默认渲染规则下，1pt 约等于 1.333px（pt是印刷行业单位，1pt = 1/72英寸，网页标准DPI为96，换算后1pt=96/72≈1.333px）
• 你设置的width="100pt"换算为像素就是 100 * 1.333 ≈ 133px，和实际渲染结果一致。

如果要实现宽度100px的效果，直接把SVG的宽高属性单位修改为px即可，示例代码：

<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 2447.6 2452.5" viewBox="0 0 2447.6 2452.5" width="100px" height="100px">

你也可以通过CSS给该SVG元素设置width: 100px，CSS规则的优先级会高于SVG标签上的原生属性，同样可以达到预期效果。

内容的提问来源于stack exchange，提问作者Trts