Html 如何显示.svg图标而不被剪裁？

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

但是，由于这些是矢量图像文件（

.svg

），我似乎找不到使用传统的

方法将图像插入我的网页的方法。因此，我继续创建CSS类，以使图像显示为CSS掩码（从而允许我通过CSS更改颜色）

然而，我很快注意到，圆形矢量图形图标的侧面略微被截断。作为一个完美主义者，我想让这些图标看起来像他们想象的那样圆。因此，在签出后，我增加了

.media按钮的宽度，并使用
-webkit mask position
将图像向下和向左移动了几个像素，这在下面的代码中很明显。这显然不起作用

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

CSS:

HTML:



TL；DR，我正在寻找一种（可能是新的）方式来显示我的
.svg
图标，它有一些不错的浏览器支持，并且能够通过CSS操纵图标的颜色。
我不能确定这个错误来自何处，但我认为它与边框有关。添加1px边框，您将看到一些非常奇怪的行为。现在回答您的问题：为了确保图像不会被剪裁，您可以使用
遮罩大小
。例如，
-webkit掩码大小：50%50%

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

这里有一支笔演示了这一点：
我不能确定这个bug是从哪里来的，但我认为它与边界有关。添加1px边框，您将看到一些非常奇怪的行为。现在回答您的问题：为了确保图像不会被剪裁，您可以使用
遮罩大小
。例如，
-webkit掩码大小：50%50%

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

这里有一支笔演示了这一点：
这里有一种方法：


svg:hover{
颜色：#009BCD；
}
p{
颜色：绿色；
}

交叉
用草图创建(http://www.bohemiancoding.com/sketch)

嘿！这是什么
在句子中间做什么？

这里有一种方法：


svg:hover{
颜色：#009BCD；
}
p{
颜色：绿色；
}

交叉
用草图创建(http://www.bohemiancoding.com/sketch)

嘿！这是什么
在句子中间做什么？

从没想过！有没有一种方法可以让我在仍然能够更改颜色的情况下只使用图像的原始实例？我添加了一个额外的示例，其中我只使用原始SVG内联。删除
version=“1.1”xmlns=”会有任何副作用http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“xmlns：草图="http://www.bohemiancoding.com/sketch/ns“
从
svg
标记以及标题、描述和defs标记中删除？不。只要将svg内联到HTML中，就可以安全地删除所有这些标记。原始svg的示例仍有一些删节。。。我只是让宽度/高度变大了吗？从没想过！有没有一种方法可以让我在仍然能够更改颜色的情况下只使用图像的原始实例？我添加了一个额外的示例，其中我只使用原始SVG内联。删除
version=“1.1”xmlns=”会有任何副作用http://www.w3.org/2000/svg“xmlns:xlink=”http://www.w3.org/1999/xlink“xmlns：草图="http://www.bohemiancoding.com/sketch/ns“
从
svg
标记以及标题、描述和defs标记中删除？不。只要将svg内联到HTML中，就可以安全地删除所有这些标记。原始svg的示例仍然有点剪裁…我是否只是将宽度/高度放大？
#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);}

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