如何在不剪切.svg图标的情况下显示它？

Question

我试图在我的网站上显示这些社交媒体图标，这样我就可以使用css改变颜色(这样我就可以添加下面代码中显示的悬停效果)。

但是，由于这些是矢量图像文件(.svg)，我似乎无法找到使用传统的<img src="">方法将图像插入到网页中的方法。因此，我继续创建CSS类，以使图像显示为CSS掩码(从而允许我通过CSS更改颜色)。

然而，我很快注意到，否则的圆形矢量图形图标的侧面是轻微的截止。作为一个完美主义者，我想让这些图标看起来像他们应该看到的那样。因此，在签出MSDN条目之后，我增加了.media-buttons类的宽度，并使用-webkit-mask-position将图像向下和向左移动几个像素，如下面的代码所示。这显然是行不通的。

我还注意到，并非所有浏览器都完全支持-webkit-mask。

CSS：

#cross{-webkit-mask: url("http://path/to/image.svg") no-repeat;}
.media-buttons {
    width: 202px;
    height: 202px;
    background: #000;
    -webkit-mask-position: 10px 10px;
}
.media-buttons:hover {background: rgb(94, 176, 201);}

HTML：

<img class="media-buttons" id="cross">

TL；博士，我正在寻找一种(可能是新的)方式来显示我的.svg图标，它有一些不错的浏览器支持，并且能够通过CSS操纵图标的颜色。

Answer 1

有一种方法：

​

svg:hover {
  color: #009BCD;
}

p {
  color: green;
}

<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" display="none">
    <title>Cross</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" fill="currentColor" sketch:type="MSShapeGroup"></path>
    </g>
</svg>



<p>
Heh! What's this
<svg width="1em" height="1em" viewBox="0 0 200 200">
  <use xlink:href="#Cross"/>
</svg>
doing in the middle of a sentence?
</p>

<svg width="50px" height="50px" viewBox="0 0 200 200">
  <use xlink:href="#Cross"/>
</svg>

​

我在这里做的是：

• 将SVG复制到HTML中(并删除XML前导)
• 在display="none"上设置<svg>，使其在页面上不可见。
• 将图标fill上的<path>元素更改为currentColor

现在，每次您想要一个图标的副本出现，创建一个迷你- SVG，崇敬<path>在第一个SVG。

<svg width="50px" height="50px" viewBox="0 0 200 200">
  <use xlink:href="#Cross"/>
</svg>

只需使用width和height值设置它的大小即可。你只需要包括每一个图标一次，你可以引用他们很多次，你喜欢。

currentColor是干什么用的？

currentColor是SVGs中的一个特殊颜色值，它告诉元素使用当前color设置的值。这意味着您可以在<use>元素之外设置颜色，它将被<use>引用的任何内容继承。通常，您不能单独设置每个图标引用的样式。无论最初的fill设置为什么，他们都会被困住。

仅使用原始SVG

​

svg path {
  fill: blue;
}

svg:hover path {
  fill: #009BCD;
}

<p>SVG just used as is</p>

<svg width="100px" height="100px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>Cross</title>
    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" sketch:type="MSShapeGroup"></path>
    </g>
</svg>

​

Answer 2

我不能确定这个bug是从哪里来的，但我认为它与边界有关。添加一个1 1px边框，您将看到一些非常奇怪的行为。现在，要回答您的问题:为了确保您的图像不被剪短，您可以使用mask-size。例如-webkit-mask-size: 50% 50%;

只是不要认为面具已经准备好黄金时段了。

这里有一支笔演示了这一点：http://codepen.io/anon/pen/ONLRbZ