将 SVG 图标定位为 list-style-image答案

【问题标题】：Positioning a SVG icon as list-style-image将 SVG 图标定位为 list-style-image
【发布时间】：2019-02-20 03:48:56
【问题描述】：

有没有一种快速简便的方法可以让我的 SVG 图标与相应的文本垂直居中？我能够让它接近，但我想把它推低一点。 This is as close as I've got

这是我的实现方式：

HTML：

<ul class="list-goals">
<li>Some text for li number one</li>
<li>Some text for li number two</li>
<li>Some text for li number three</li>
</ul>

CSS：

    .list-goals li {
    margin-bottom: 1rem;
    background: url(../images/trophy.svg) no-repeat left top;
    padding: 0px 0 3px 24px;
}

我想我总是可以使用带有内置填充的 png，但我宁愿坚持我的 svg 并将定位或填充直接应用于 svg 图标。

感谢您的帮助！

【问题讨论】：

只需更改（如果不在 SVG 中，则添加一个）viewBox 以添加一些空间。

标签： css svg icons

【解决方案1】：

鉴于这个简单的 SVG 示例：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
  </g>
</svg>

如果我将 viewBox 更改为 viewBox="0 -20 600 600"，它会将图像向下移动 -20 个单位。结果将在浏览器中显示（右侧为-20）：

【讨论】：

【解决方案2】：

只需使用background-position CSS 属性将图像移动到您想要的位置。

这是一个简单的示例（使用数据 URI 图像，但也可以与外部文件一起使用）：

li {
    font-size: 30px;
    list-style-type: none;
    margin-bottom: 1rem;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Ik0wIDAgMjAgMTAgMCAyMFoiIGZpbGw9IiNhYWEiLz48L3N2Zz4=) no-repeat left top;
    padding: 0px 0 3px 24px;
}

ul.better li {
  background-position: left 4px;
}

<p>ok:</p>
<ul class="ok">
<li>Text</li>
</ul>
<hr />
<p>better:</p>
<ul class="better">
<li>Text</li>
</ul>

【讨论】：

【解决方案3】：

我知道这是一个迟到的答案，但你也可以试试这个。

li { list-style-image: url(img/iphone.svg); }

您无需执行任何其他操作，因为 SVG 应用了默认间距。

【讨论】：

有没有办法在不修改矢量文件的情况下控制CSS中SVG的大小？