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

如何在没有剪辑的情况下显示.svg图标？

2 个答案: