IE를 사용하여 background-imge에 SVG가 지정된 요소를 제거하면 SVG가 표시되지 않습니다.

4955 단어 InternetExplorerCSS
제목이 무슨 말을 하는지 모르겠지만 주로 페이지를 로드할 때 AJAX에서 얻은 목록으로 바꾸면 IE 10, IE 11은 이 목록에 표시해야 할 아이콘 등 왜 표시되지 않는 경우가 발생한다.
구체적으로 다음 사항을 수행하면 지정된 SVG를 표시할 수 없습니다.
  • background-image에서 SVG가 지정한 요소를 HTML에 미리 넣기
  • DOMContentLoaded의 정시 삭제
  • 지정된 SVG 읽기 완료 후 동일한 요소 추가
    • 재현 코드
    <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>テスト</title>

<style>
#svg {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg);
    width: 262px;
    height: 372px;
    border: solid 1px #000;
}
</style>

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function(){
    $('body').html('');
    setTimeout(function(){ $('<div id="svg"></div>').appendTo('body'); }, 1000)
})  
</script>
</head>
<body>

<div id="svg"></div>

</body>
</html>
    예기한 결과
    실제 결과


    원인의 추측


    IE는 CSS에서 참조하는 이미지에서 HTML에서 사용한 이미지만 로드합니다DOMContentLoaded.따라서 DOMContentLoaded의 정시에 요소를 삭제하면 기본적으로'SVG의 마운트가 시작되었지만 아직 끝나지 않았다'는 상태에서 요소를 삭제할 수 있다.
    그리고 SVG의 로드가 끝났을 때 표시되어야 할 요소가 존재하지 않는 상황에서 어떤 중도에서 폐기된 상태로 변할지 표시할 수 없다.PNG 이미지 등에서 일어나지 않았기 때문에 SVG의 보라색일까 아니면 무엇일까.F12 개발자 도구가 더 이상 표시되지 않는 SVGimg를 지정하는 요소를 삽입하면 왠지background-image SVG도 표시된다는 점이 흥미롭다.

    회피 방법


    요소를 없애기 위해.html('') 잘 못 했나 봐요.jQueryremove() 방법이나 empty() 방법으로 삭제하면 이 현상이 발생하지 않습니다.innerHTML 갑자기 난폭한 행동으로 바뀌면 안 되죠.
    $('body').html('');  // NG
$('#svg').remove();  // OK
$('body').empty();   // OK
    그러니까 가로로 하지 말고 DOM 조작으로 잘 처리해라.
    css에서border를 사용하지 않고 삼각형을 그립니다
    Kubernetes18--kube-scheduler 소스 3--scheduler 실행 과정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage