Html 具有列计数属性的Svg显示问题

我有一个要在多列（至少两列）中显示的块列表。 在我的块中，我有一个标题和svg图标

如果我使用css属性“column count”在列中分割内容，一些svg会在Google Chrome上显示。（Firefox没有问题）

下面是一个演示：

部分{
宽度：500px；
右边距：100px；
浮动：左；
}
.集装箱{
边框：1px纯黑；
保证金：0自动；
填充：0.25em；
边缘顶部：1.25em；
}
.container.withcolumns{
列数：2；
柱间距：2米；
}
.街区{
内破：避开立柱；
}
.块标题{
字体大小：粗体；
填充：0.5em0；
边框底部：1px纯色灰色；
}
.块头svg{
宽度：15px；
高度：15px；
右边距：0.5em；
}
ul，
李{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
保证金：0.25em0；
}

第一个无列块
第一区

项目1
第2项
项目3

第2区

项目1
项目2

第3区

项目1
第2项

第4区

项目1
项目2
项目3
项目4
项目5

列的代码相同
第一区

项目1
第2项
项目3

第2区

项目1
项目2

第3区

项目1
第2项

第4区

项目1
项目2
项目3
项目4
项目5

这肯定是一个bug，但这里有一个不同的代码，它使用SVG作为背景来实现相同的功能，而没有bug：

部分{
宽度：500px；
右边距：100px；
浮动：左；
}
.集装箱{
边框：1px纯黑；
保证金：0自动；
填充：0.25em；
边缘顶部：1.25em；
}
.container.withcolumns{
列数：2；
柱间距：2米；
}
.街区{
内破：避开立柱；
}
.块标题{
字体大小：粗体；
填充：0.5em18px；
边框底部：1px纯色灰色；
背景：url（'data:image/svg+xml；utf8'，）左上角0.5em/15px 15px不重复；
}
ul，
李{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
保证金：0.25em0；
}

第一个无列块
第一区

项目1
第2项
项目3

第2区

项目1
项目2

第3区

项目1
第2项

第4区

项目1
项目2
项目3
项目4
项目5

列的代码相同
第一区

项目1
第2项
项目3

第2区

项目1
项目2

第3区

项目1
第2项

第4区

项目1
项目2
项目3
项目4
项目5

在关闭最后一个块之前关闭节的标记中存在错误。但这并不能解决问题。 这可能是一个bug。为了让它工作，我删除了转换并重新计算了d属性

部分{
宽度：500px；
右边距：100px；
浮动：左；
}
.集装箱{
边框：1px纯黑；
保证金：0自动；
填充：0.25em；
边缘顶部：1.25em；
}
.container.withcolumns{
列数：2；
柱间距：2米；
}
.街区{
内破：避开立柱；
}
.块标题{
字体大小：粗体；
填充：0.5em0；
边框底部：1px纯色灰色；
}
.块头svg{
宽度：15px；
高度：15px；
右边距：0.5em；
}
ul，
李{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
保证金：0.25em0；
}

列的代码相同
第一区

项目1
第2项
项目3

第2区

项目1
项目2

第3区

项目1
第2项

第4区

项目1
项目2
项目3
项目4
项目5

我遇到了完全相同的问题，在搜索了一段时间后，以下内容使Chrome能够正确呈现我的SVG：

-webkit-backface-visibility: hidden;

在上面的代码中，如果添加以下内容，它将起作用：

.block header {
     font-weight: bold;
     padding: 0.5em 0;
     border-bottom: 1px solid grey;
     -webkit-backface-visibility: hidden;
  }

---

显然我错过了什么。双重呼叫是为了跨浏览器兼容性

href=“#svg容量”xlink:href=“#svg容量”

@Alexandr\u TT绝对适用于跨浏览器compatibility@enxaneta：谢谢你的帮助。问题是，我有多个可能的svg，我将它们导出到Adobe XD，因此我无法修改代码感谢您的帮助，但我不能将svg用作背景图像My heroe:）完美我在svg上尝试过，但在标题上没有尝试过谢谢您的帮助无需担心：）。