html - 在具有多个元素的 div 中拟合 svg

Question

我不熟悉在 CSS 中使用 svgs。我的目标是将我在下面引用的 svg(电池图标)放在 item 的 div 中。类，垂直居中，在第一种情况下位于元素符号左侧(在标记为 foo 的元素中)，在第二种情况下位于文本右侧(在标记为 bar 的元素中)。

我尝试将图像的显示更改为 inline-block , 并插入

<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />

在元素内(见下文)，但这不起作用。将 svg 元素与其他元素内联插入 div 中的最佳做法是什么？应该span或 background-size:contain使用？

#foo { background: #00FF7F; }
#bar { background: #ff0000;}


.items { text-align: center; font-weight: 500; color: #fff; border-width: 2px;
border-color: #fff; padding: 2px;}


.item, .item-selected{ display: inline-block; font-weight: 500;
  text-align: center;
 vertical-align: middle;
 border-width: 2px;
 background-color: #484848;
 opacity: 0.85;
 border-color: green;
 border-width: 2px;
border-radius: 3px;
padding: 2px;
color: #fff;
cursor: pointer;
}

.item-selected{
background-color: #fff;
color: #181818;

}

.bullet { display: inline-block; margin: 3px 3px 0px 10px;  width: 10px; height: 10px; border-radius: 7px; }
.label { display: inline-block; font-weight: 300;}


image {
  width: 50px;
  height: 50px;
  display: inline-block;
}

<div class='items'>
  <div class='item' id= 'wrk'><image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" /><div class='bullet' id='foo'></div><div class='label'>foo</div></div>
  <div class='item-selected' id = 'brk'><div class='bullet' id='bar'></div><div class='label'>bar</div></div>
</div>

<svg>       
<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />    
</svg>

Answer 1

您可以使用 img 将 svg 用作图像，然后调整 CSS 以进行对齐:

#foo {
  background: #00FF7F;
}

#bar {
  background: #ff0000;
}

.items {
  text-align: center;
  font-weight: 500;
  color: #fff;
  border-width: 2px;
  border-color: #fff;
  padding: 2px;
}
img {
 vertical-align:middle;
}

.item,
.item-selected {
  display: inline-block;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  border-width: 2px;
  background-color: #484848;
  opacity: 0.85;
  border-color: green;
  border-width: 2px;
  border-radius: 3px;
  padding: 2px;
  color: #fff;
  cursor: pointer;
}

.item-selected {
  background-color: #fff;
  color: #181818;
}

.bullet {
  display: inline-block;
  margin: 3px 3px 0px 10px;
  width: 10px;
  height: 10px;
  border-radius: 7px;
}

.label {
  display: inline-block;
  font-weight: 300;
}

image {
  width: 50px;
  height: 50px;
  display: inline-block;
}

<div class='items'>
  <div class='item' id='wrk'>
    <img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
    <div class='bullet' id='foo'></div>
    <div class='label'>foo</div>
  </div>
  <div class='item-selected' id='brk'>
    <div class='bullet' id='bar'></div>
    <div class='label'>bar</div>
    <img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
  </div>
</div>