这个 SVG 在 Chrome 中运行良好，但在 Internet Explorer 中却表现得很奇怪。有人可以帮我吗？
Posted
技术标签:
【中文标题】这个 SVG 在 Chrome 中运行良好，但在 Internet Explorer 中却表现得很奇怪。有人可以帮我吗？【英文标题】：This SVG is working fine in Chrome but in Internet Explorer it's acting very weird. Can someone help me with that? 【发布时间】：2020-02-14 10:55:42 【问题描述】：我有这个 SVG，它在 Chrome 中渲染得很好，但在 IE 中它似乎表现得很奇怪。最初我需要将此 SVG 固定在顶部，但是当我使用 position: fixed; 时，它在 Chrome 中呈现良好并且表现如预期，但在 IE 中由于某种原因它呈现在中间。
html, body
height: 100%!important;
width: 100%!important;
padding: 0!important;
margin: 0!important;
<!DOCTYPE html>
<html>
<head>
<title>rough</title>
</head>
<body>
<div class="page-container">
<div class="content-container">
<!--- Header -->
<svg pointer-events="none" version="1.1" class="header" id="header" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="1134.63 310.46 562.51 101.82" enable-background="new 1134.63 310.46 562.51 101.82" xml:space="preserve">
<path id="background_header" fill="#5FBA7D" d="M1697.14,412.28c0-40.87-41.05-41.05-41.05-41.05h-480.48c0,0-40.94,1.11-40.94-40.94
c-0.08-0.05,0-19.83,0-19.83h562.46L1697.14,412.28z"/>
</svg>
<!--- Content -->
<div class="body-container=">
<div class="card">
<h1>Log in</h1>
<form action="#">
<input type="text">
<input type="password">
<button type="submit" class="main-button">Log in</button>
</form>
<p>
<h4 class="link-text">Forgot password or username?</h4>
<a href="#" data-toggle="modal" data-target="#myModal" id="rbutton" class="link">Reset a new one</a>
<br>
<h4 class="link-text">Don't have an account?</h4>
<a href="#" class="link">Create one</a>
<br>
<h4 class="link-text">By logging in you agree to our</h4>
<a href="#" class="link">Terms of Service</a>
<h4 class="link-text">and</h4>
<a href="#" class="link">Privacy Policy</a>
</p>
</div>
</body>
</html>
<style>
</style>我尝试了很多东西，但看到了两种结果之一 A :- SVG 被渲染在屏幕中间而不是顶部，尽管它是 100% 的宽度，正如预期的那样。截图 - https://cdn1.imggmi.com/uploads/2019/10/17/20083d8ba442704e852b12667a2cfcd3-full.png B :- 它没有像预期的那样占用 100% 的宽度，而是在顶部呈现。截图 - https://cdn1.imggmi.com/uploads/2019/10/17/88cb40d088a10496abab10a63faaf4a7-full.png
我在此处提供的代码使 IE 在屏幕中间呈现 svg，但我希望它位于顶部。
【问题讨论】：
你用的是哪个IE版本？ @SayantanMukherjee IE11 【参考方案1】：尝试参考下面的示例在 Internet Explorer 11、Chrome 和其他浏览器中运行良好。
<!doctype html>
<html>
<head>
<style>
header
position: absolute;
height: 300px;
h1
padding-top: 150px;
font: 44px "Arial";
header h1
color: white;
svg
position: fixed;
top: 0;
width: 100%;
height: 300px;
@media (max-width: 699px)
.svg--lg
display: none;
@media (min-width: 700px)
.svg--sm
display: none;
</style>
</head>
<body>
<div class="body-container=">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="1134.63 310.46 562.51 101.82" enable-background="new 1134.63 310.46 562.51 101.82">
<path id="background_header" fill="#5FBA7D" d="M1697.14,412.28c0-40.87-41.05-41.05-41.05-41.05h-480.48c0,0-40.94,1.11-40.94-40.94
c-0.08-0.05,0-19.83,0-19.83h562.46L1697.14,412.28z"/>
</svg>
<div class="card">
<h1>Log in</h1>
<form action="#">
<input type="text">
<input type="password">
<button type="submit" class="main-button">Log in</button>
</form>
<p>
<h4 class="link-text">Forgot password or username?</h4>
<a href="#" data-toggle="modal" data-target="#myModal" id="rbutton" class="link">Reset a new one</a>
<br>
<h4 class="link-text">Don't have an account?</h4>
<a href="#" class="link">Create one</a>
<br>
<h4 class="link-text">By logging in you agree to our</h4>
<a href="#" class="link">Terms of Service</a>
<h4 class="link-text">and</h4>
<a href="#" class="link">Privacy Policy</a>
</p>
</div>
</body>
</html>
输出：
此外，您可以根据需要修改代码。
【讨论】：
【参考方案2】：尝试将 svg 包装在 div 中
并使用这种风格
<div class="div_wrap">
<svg pointer-events="none" version="1.1" class="header" id="header" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="1134.63 310.46 562.51 101.82" enable-background="new 1134.63 310.46 562.51 101.82" xml:space="preserve">
<path id="background_header" fill="#5FBA7D" d="M1697.14,412.28c0-40.87-41.05-41.05-41.05-41.05h-480.48c0,0-40.94,1.11-40.94-40.94
c-0.08-0.05,0-19.83,0-19.83h562.46L1697.14,412.28z"/>
</svg>
</div>
.div_wrap
position: fixed;
top:0;
left:0;
height:20px;
width : 100%;
试试这个
【讨论】：
这正是我想要的最终结果，当我这样做时，它在 chrome 和其他浏览器中呈现和表现完美，但在 IE 中，它在页面中间呈现该 svg。 截图如下：- cdn1.imggmi.com/uploads/2019/10/17/… 如果我将它包装在一个 div 中然后应用固定位置，它会在顶部呈现，它确实保持固定，但它不会占用整个浏览器窗口的宽度。这是截图cdn1.imggmi.com/uploads/2019/10/17/… 我认为你的问题是关于 svg 在 IE 中的定位。这解决了它。请为宽度提出不同的问题。谢谢 我的问题实际上是关于 SVG 在 IE 中的奇怪行为以上是关于这个 SVG 在 Chrome 中运行良好，但在 Internet Explorer 中却表现得很奇怪。有人可以帮我吗？的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个 SVG 蒙版动画在 Firefox 中断断续续，但在 Chrome 中却很流畅？
AJAX 在 IE 中运行良好，但在 Firefox\Chrome 中运行良好（奇怪 :)）[重复]
无法在 Firefox 和 IE9 中获取数据，但在 Chrome 和 Safari 中运行良好
无限 CSS 旋转在 Firefox 中有效，但在 Chrome 中无效