SVG定位：在我的网站上只是IE的相对破坏？

Question

如果以前曾多次询问过这个问题我很抱歉，但在过去的几个小时里我找不到明确或简单的答案。

我开设了一个临床考试网站，我最近创建了一个小的SVG徽标，如导航栏中所示：https://simpleosce.com/

我的html文档中的代码如下。这个SVG只包含一个锚标记：

<a href="https://www.SimpleOSCE.com"><svg class="theLogo" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.38 25"><defs><style>.cls-1{fill:#009955;}</style></defs><title>Untitled-5</title><path class="cls-1" d="M22.32,7.43a2.49,2.49,0,0,0-1.26-2.15L12.36.33a2.49,2.49,0,0,0-2.49,0L1.23,5.4A2.49,2.49,0,0,0,0,7.57l.06,10a2.49,2.49,0,0,0,1.26,2.15L10,24.67a2.49,2.49,0,0,0,2.49,0l8.63-5.06a2.49,2.49,0,0,0,1.23-2.17Zm-3.69,5.7A1.85,1.85,0,0,1,16.78,15H13.67v3.11a1.85,1.85,0,0,1-1.85,1.85H10.56a1.85,1.85,0,0,1-1.85-1.85V15H5.6a1.85,1.85,0,0,1-1.85-1.85V11.87A1.85,1.85,0,0,1,5.6,10H8.71V6.91a1.85,1.85,0,0,1,1.85-1.85h1.26a1.85,1.85,0,0,1,1.85,1.85V10h3.11a1.85,1.85,0,0,1,1.85,1.85Z" transform="translate(0)"/></svg></a>

这是带有站点名称的标头标记旁边的全部内容。我将SVG定位在上面的类＆＃34; theLogo＆＃34;像这样：

.theLogo{height:24px; position:relative; margin: 12px 0px 0px -5px;} 

在chrome，firefox和edge上显示正常。在IE中看起来真的错了。 有没有办法让我的表现符合预期？

非常感谢提前。

Answer 1

如果您没有将属性preserveAspectRatio添加到svg文件，则默认情况下preserveAspectRatio = "xMidYMid meet"

这是IE11中的徽标发生在块中间并打破布局的可能原因之一

IE11

尝试添加preserveAspectRatio = "xMinYMin meet"和视口 - width ="22.38" height="25"

＆＃13;

＆＃13;

.theLogo{height:24px; position:relative; margin: 12px 0px 0px -5px;}
	.nav-brand{float:left;margin:0;}
.nav-brand a{display:block;padding:10px 10px 10px 20px;color:black;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:22px;font-weight:normal;line-height:29px;text-decoration:none;}

＆＃13;

<h2 class="nav-brand"><a href="https://www.SimpleOSCE.com">SimpleOSCE</a></h2>
	<a href="https://www.SimpleOSCE.com"><svg class="theLogo" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width ="22.38" height="25" viewBox="0 0 22.38 25" preserveAspectRatio="xMinYMin meet">
	<defs><style>.cls-1{fill:#009955;}
	</style>
	</defs>
	<title>Untitled-5</title>
	<path class="cls-1" d="M22.32,7.43a2.49,2.49,0,0,0-1.26-2.15L12.36.33a2.49,2.49,0,0,0-2.49,0L1.23,5.4A2.49,2.49,0,0,0,0,7.57l.06,10a2.49,2.49,0,0,0,1.26,2.15L10,24.67a2.49,2.49,0,0,0,2.49,0l8.63-5.06a2.49,2.49,0,0,0,1.23-2.17Zm-3.69,5.7A1.85,1.85,0,0,1,16.78,15H13.67v3.11a1.85,1.85,0,0,1-1.85,1.85H10.56a1.85,1.85,0,0,1-1.85-1.85V15H5.6a1.85,1.85,0,0,1-1.85-1.85V11.87A1.85,1.85,0,0,1,5.6,10H8.71V6.91a1.85,1.85,0,0,1,1.85-1.85h1.26a1.85,1.85,0,0,1,1.85,1.85V10h3.11a1.85,1.85,0,0,1,1.85,1.85Z" transform="translate(0)"/></svg></a>

＆＃13;

＆＃13;

＆＃13;