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

Question

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

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

但是，我很快注意到原本为圆形的矢量图形图标的边被略微截断了。作为我这个完美主义者，我想让图标看起来像他们应该的那样。因此，在查看 webkit-mask MSDN entry 后，我增加了 .media-buttons class 的宽度，并使用 -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 中的 <path> 的 mini-svg。

<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 图标？

How do I Display a .svg Icon Without it Getting Clipped?

html

css

svg

image

vector-graphics