嵌入式SVG未对齐元素

所以我试图从PNG转移到SVG，但我有一些成长的痛苦。我想使用嵌入式的SVG，这样我就可以改变它们的CSS属性来获得它们的颜色，并减少资源负载。虽然我遇到的一个问题是当SVG嵌入时，它出现在提供的框的上方，但如果我使用链接到SVG的img标签，则格式是完美的。嵌入式SVG未对齐元素

在我的照片中，右侧的框具有img标签，而左侧的框已嵌入。

http://jsfiddle.net/fLWhu/684/

<span> 
          @Html.Raw(File.ReadAllText(Server.MapPath("~/Content/images/icons/1.svg"))) 

</span> 
<span> 
<img src="~/Content/images/icons/1.svg" alt="our linked in" /> 
</span>

更新：

加入

 display:inline-block; 
    vertical-align:middle;

到跨度中后，结果是。

来源

2017-06-09 Joshua Waring

SVG的部分看起来不错，但你可以尝试设置显示：inline-block的和垂直对齐：中间向div.header .right p跨度元素

来源

2017-06-09 02:13:23

谢谢你，这并打倒SVG，尽管它仍然没有完美对齐，并且对齐得更高一些。我正在浏览所有试图找出原因的CSS。这是非常一致的，我想我会用一些填充隐藏问题。 –

嵌入式SVG未对齐元素

回答

相关问题