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

Question

我正在尝试在我的网站上显示 these 社交媒体图标，以便我可以使用 css 更改颜色（这样我就可以添加下面代码中显示的悬停效果）。

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

但是，我很快注意到原本圆形的矢量图形图标的侧面被略微截断。作为一个完美主义者，我想让图标看起来像他们应该的那样是圆形的。因此，在检查了webkit-mask MSDN entry 之后，我增加了.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;DR，我正在寻找一种（可能是新的）方式来显示我的 .svg 图标，该方式具有不错的浏览器支持，并且能够通过 CSS 操纵图标的颜色。

Answer 1

我无法确定这个错误来自哪里，但我认为它与边界有关。添加一个 1px 的边框，你会看到一些非常奇怪的行为。现在回答您的问题：为确保您的图像不会被剪裁，您可以使用mask-size。例如。 -webkit-mask-size: 50% 50%;

只是不要认为口罩已经准备好迎接黄金时段了。

这里有一支笔可以证明这一点：http://codepen.io/anon/pen/ONLRbZ

Answer 2

这是一种方法：

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 序言）
• 在<svg> 上设置display="none"，使其在页面上不可见。
• 将图标<path> 元素上的fill 更改为currentColor

现在，每当您希望显示图标的副本时，请创建一个迷你 svg，以尊重第一个 SVG 中的 <path>。

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

只需使用 width 和 height 值设置它的大小。您只需将每个图标包含一次，您可以根据需要多次引用它们。

currentColor 是干什么用的？

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

仅使用原始 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>