此 SVG 在 Chrome 中工作正常，但在 Internet Explorer 中它表现得很奇怪。有人可以帮我吗？

Question

我有这个 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>&nbsp;
      <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>&nbsp;
      <a href="#" class="link">Create one</a>
     <br>
      <h4 class="link-text">By logging in you agree to our</h4>&nbsp;
      <a href="#" class="link">Terms of Service</a>
      <h4 class="link-text">and</h4>&nbsp;
      <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，但我希望它在顶部。

Answer 1

尝试将 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%;
 }

试试这个

Answer 2

尝试参考下面的示例在 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>&nbsp;
                        <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>&nbsp;
                        <a href="#" class="link">Create one</a>
                    <br>
                        <h4 class="link-text">By logging in you agree to our</h4>&nbsp;
                        <a href="#" class="link">Terms of Service</a>
                        <h4 class="link-text">and</h4>&nbsp;
                        <a href="#" class="link">Privacy Policy</a>
                    </p>
                </div>
</body>
</html>

输出：

另外，您可以根据需要修改代码。

此 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?

html

css

internet-explorer

svg