Posted at

IE11でSVGで指定したサイズからはみ出した要素が表示されてしまう。

More than 3 years have passed since last update.

svg.js を試してみようと次のような簡単なサンプルを書いてみた。


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で表示すると、

スクリーンショット 2016-07-30 15.28.42.png

このように表示されるが、IE11だと次のようになる。

スクリーンショット 2016-07-30 15.28.53.png

どうも、IEではデフォルトのoverflow属性が"visible"になっているもよう。

以下のように明示的にoverflow属性に"hidden"を指定してやれば、IEでもchromeと同様の表示になった。

var draw = SVG('drawing').size(100, 100).attr({"overflow":"hidden"});

めでたし、めでたし。