IE11에서 SVG로 지정한 크기에서 튀어 나온 요소가 표시됩니다.
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>SVG TEST</title>
</head>
<body>
<h1>SVG TEST</h1>
<div id="drawing"></div>
<!-- SCRIPTS -->
<script src="svg.min.js"></script>
<script>
window.onload = function() {
var draw = SVG('drawing').size(100, 100);
draw.circle(100).attr({"fill":"red"}).move(50,50);
draw.rect(100, 100).attr({"fill":"none", "stroke": "black"});
}
</script>
</body>
</html>
이것을 chrome으로 표시하면,
이렇게 표시되지만, IE11이라면 다음과 같이 된다.
아무래도, IE에서는 디폴트의 overflow 속성이 "visible"로 되어 있는 것 같다.
아래와 같이 명시적으로 overflow 속성에 "hidden"을 지정해 주면 IE에서도 크롬과 같은 표시가 되었다.
var draw = SVG('drawing').size(100, 100).attr({"overflow":"hidden"});
죄송합니다.
Reference
이 문제에 관하여(IE11에서 SVG로 지정한 크기에서 튀어 나온 요소가 표시됩니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tricogimmick/items/a169ab7864e24fab0836텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
