インラインSVGで隙間が出来たり、IEは小さくなったり、正常に表示されない

カテゴリー：SVG

記事作成日：2017-12-22

インラインSVGを設置した時に、IEの表示が崩れる。それを回避しようとCSSを変えると今度は上下に隙間が出来てしまったりと都合が悪い。最終的に以下の通りとなった。備忘録。

## CSSとHTML

```html
<style>
div.wrap1 svg {
	max-width: 100%;
	background-color: #eee; /* 隙間が分かりやすくする為 */
}
div.wrap2 svg {
	max-width: 100%;
	height: auto;
	background-color: #fee; /* 隙間が分かりやすくする為 */
}
div.wrap3 {
	position: relative;
	padding-top: 16.666%;
	max-width: 600px;
	background-color: #eef; /* 隙間が分かりやすくする為 */
}
div.wrap3 svg {
	position: absolute;
	max-height: 100%;
	max-width: 100%;
	top: 0;
	left: 0;
}
div.wrap4 {
	max-width: 600px;
}
div.wrap4 div {
	position: relative;
	padding-top: 16.666%;
	max-width: 600px;
}
div.wrap4 div svg {
	position: absolute;
	max-height: 100%;
	max-width: 100%;
	top: 0;
	left: 0;
}
</style>
<div class="wrap1">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="100px" viewBox="0 0 600 100" style="enable-background:new 0 0 600 100;" xml:space="preserve">
		<rect width="600" height="100" fill="#ccc"/>
		<text transform="matrix(1 0 0 1 150 50)">#1 ブラウザ幅を狭めると上下に隙間が出来る</text>
	</svg>
</div>
<div class="wrap2">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="100px" viewBox="0 0 600 100" style="enable-background:new 0 0 600 100;" xml:space="preserve">
		<rect width="600" height="100" fill="#dcc"/>
		<text transform="matrix(1 0 0 1 150 50)">#2 IEは正常に表示されない</text>
	</svg>
</div>
<div class="wrap3">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="100px" viewBox="0 0 600 100" style="enable-background:new 0 0 600 100;" xml:space="preserve">
		<rect width="600" height="100" fill="#ccd"/>
		<text transform="matrix(1 0 0 1 150 50)">#3 ブラウザ幅を広げると下に隙間が出来る</text>
	</svg>
</div>
<div class="wrap4">
	<div>
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="100px" viewBox="0 0 600 100" style="enable-background:new 0 0 600 100;" xml:space="preserve">
			<rect width="600" height="100" fill="#cdc"/>
			<text transform="matrix(1 0 0 1 150 50)">#4 問題無し</text>
		</svg>
	</div>
</div>
<div>--画像の下--</div>

```

CONTENTS

Android

Androidアプリの合計ダウンロード数、iOSアプリの合計ダウンロード数

Flutter

Android Studio. Could not determine java version. Unable to find bundled Java version.

その他

XAMPPのMySQLを復旧

ブラウザ

各ブラウザでのキャッシュクリアまとめ

JavaScript

JavaScriptで動画読み込み