列数属性的SVG显示问题

Question

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

如果我使用 css 属性“column-count”将内容拆分为列，则某些 svg 在 Google Chrome 上会消失。 （火狐没问题）

这是一个演示：

section {
  width: 500px;
  margin-right: 100px;
  float: left;
}
.container {
  border: 1px solid black;
  margin: 0 auto;
  padding: 0.25em;
  margin-top: 1.25em;
}
.container.withcolumns {
  column-count: 2;
  column-gap: 2em;
}
.block {
  break-inside: avoid-column;
}
.block header {
  font-weight: bold;
  padding: 0.5em 0;
  border-bottom: 1px solid grey;
}
.block header svg {
  width: 15px;
  height: 15px;
  margin-right: 0.5em;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  margin: 0.25em 0;
}

<section>
<h1>First block without columns</h1>
<div class='container'>
  <div class='block'>
    <header>
      <svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>  
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>
</section>
<section>
  <h1>Same code with columns</h1>
<div class='container withcolumns'>
  <div class='block'>
    <header>
      <svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>   
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  </section>
</div>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="svg-capacity" viewBox="0 0 17.293 20">
    <path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path>
  </symbol>  
</svg>

有人知道如何解决这个问题吗？

问候

Answer 1

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

-webkit-backface-visibility: hidden;

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

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

Answer 2

这肯定是一个错误，但这里有一个不同的代码使用 SVG 作为背景来实现相同的目标，而没有错误：

section {
  width: 500px;
  margin-right: 100px;
  float: left;
}
.container {
  border: 1px solid black;
  margin: 0 auto;
  padding: 0.25em;
  margin-top: 1.25em;
}
.container.withcolumns {
  column-count: 2;
  column-gap: 2em;
}
.block {
  break-inside: avoid-column;
}
.block header {
  font-weight: bold;
  padding: 0.5em 18px;
  border-bottom: 1px solid grey;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.293 20" width="15"> <path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path></svg>') left top 0.5em/15px 15px no-repeat;
  
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  margin: 0.25em 0;
}

<section>
<h1>First block without columns</h1>
<div class='container'>
  <div class='block'>
    <header>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>  
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      
    </ul>
  </div>
  <div class='block'>
    <header>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>
</section>
<section>
  <h1>Same code with columns</h1>
<div class='container withcolumns'>
  <div class='block'>
    <header>
      
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>   
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class='block'>
    <header>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  </section>
</div>

Answer 3

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

section {
  width: 500px;
  margin-right: 100px;
  float: left;
}
.container {
  border: 1px solid black;
  margin: 0 auto;
  padding: 0.25em;
  margin-top: 1.25em;
}
.container.withcolumns {
  column-count: 2;
  column-gap: 2em;
}
.block {
  break-inside: avoid-column;
}
.block header {
  font-weight: bold;
  padding: 0.5em 0;
  border-bottom: 1px solid grey;
}
.block header svg {
  width: 15px;
  height: 15px;
  margin-right: 0.5em;
}
ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  margin: 0.25em 0;
}

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="svg-capacity" viewBox="0 0 17.293 20">
    <path d="M13.73,4a2.012,2.012,0,1,0,-1.437,-0.575a2,2,0,0,0,1.437,0.575zm1.52,1h-3.053a2.012,2.012,0,0,0,-2.027,2v5.494h1.52v7.506h4.067v-7.507h1.533v-5.493a2.022,2.022,0,0,0,-2.039,-2zm-11.693,-1a2,2,0,1,0,-2.027,-2a2.023,2.023,0,0,0,2.027,2zm1.52,1h-3.04a2.015,2.015,0,0,0,-2.04,2v5.493h1.533v7.507h4.067v-7.507h1.52v-5.493a2.015,2.015,0,0,0,-2.04,-2z" ></path>
  </symbol>  
</svg>


<section>
  <h1>Same code with columns</h1>
<div class='container withcolumns'>
  <div class='block'>
    <header>
      <svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
      Block 1</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>   
      <li>Item 3</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>      
    </ul>
  </div>
  <div class='block'>
    <header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  </div>
</section>