html - 将 SVG 用作 CSS 列表样式图像时浏览器之间的渲染差异

Question

我创建了一个非常简单的 SVG，它只是一个红色圆圈，用作我网站的 list-style-image。我从这个 SO 答案中得到了这个想法:https://stackoverflow.com/a/19528768/201021

此解决方案在 Internet Explorer 中运行良好。事实上，除 IE 之外的所有其他浏览器都以相同的方式呈现列表。在 IE 中，SVG 图像渲染得有点大，有时边缘会被稍微切掉。请参阅以下示例:

Internet Explorer:

Chrome:

---

即使在 SVG 文件中设置了固定的高度和宽度，它也无法在 IE 中正确呈现:

边缘有时仍会被切断，标记似乎没有像应有的那样垂直居中。

即使标记非常小，也无法正确呈现:

您可以看到第三层的标记有边缘截断。

此外，显式设置高度和宽度而不是使用 View 框意味着当字体大小增加时标记不再自动缩放，这是我选择走这条路的原因之一。

---

redcircle.svg 的 SVG 代码:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="50%" fill="red" />
</svg>

HTML:

<p>
    <ul>
        <li>
            <span style="line-height: 1.5rem;">Bullet one</span><br>
        </li>
        <ul>
            <li>
                <span style="line-height: 1.5rem;">Bullet level two</span>
            </li>
            <ul>
                <li>Bullet level three</li>
            </ul>
        </ul>
    </ul>
</p>

CSS:

ul li {
  list-style-image: url("Images/redcircle.svg");
}

---

除了 IE 在 SVG 呈现期间必须执行与其他浏览器不同的操作外，我真的无法弄清楚为什么会发生这种情况。也许 IE 中列表标记的默认大小更大或可扩展？

我也有点不知道要测试什么。我试过更改 SVG 中的 viewBox 值，但我以前从未编写过 SVG，所以我不太确定我在做什么。

有人知道为什么会这样吗？更好的是，有没有人知道让 SVG 在 Internet Explorer 中呈现相同内容的解决方法？

Answer 1

尝试像这样声明 svg 代码:

<svg version="1.1" id="yourID" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="8px" height="8px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">

设置所需的宽度和高度而不是 8px，应该可以，虽然我现在没有时间测试它，但它应该可以工作)