Этот SVG отлично работает в Chrome, но в Internet Explorer работает очень странно. Может ли кто-нибудь помочь мне с этим? - PullRequest
Новая
       15

Этот SVG отлично работает в Chrome, но в Internet Explorer работает очень странно. Может ли кто-нибудь помочь мне с этим?

0 голосов
/ 17 октября 2019

У меня есть этот 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 в середине экрана, но я хочу его вверху.

Ответы [ 2 ]

0 голосов
/ 18 октября 2019

Попробуйте привести пример, приведенный ниже, работает нормально в 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>

Вывод:

enter image description here

Кроме того, вы можете изменить код в соответствии с вашими требованиями.

0 голосов
/ 17 октября 2019

Попробуйте обернуть этот 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%;
 }

Попробуйте это

...