環境
windows10
Microsoft Edge 44.18362.387.0
Microsoft EdgeHTML 18.18362
chrom:77.0.3865.120
firefox:70.0
SVGで図形を作ってそれをページに表示したいのですが、ブラウザによって表示が変わってしまいます。ためしたのはfirefox,micro soft edgeです。
SVG
1(sample.svg) 2<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 64 64" preserveAspectRatio="none" id="svg"> 3<path d="M0 64 L32 64 S38 56 24 50 S6 60 0 50 Z" fill="rgb(204, 0, 0, 0.8)"></path> 4 </svg>
SVG
1(bg.svg) 2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 3 viewBox="0 0 64 64" 4 preserveAspectRatio="none" id="svg-bg"> 5 <path d="M0 64 L64 64 L64 32 S60 30 56 22 S32 30 16 18 S4 30 0 28 Z" fill="rgb(255, 153, 50, 0.7)"></path> 6</svg>
CSS
1body { 2 margin: 0; 3} 4html, 5body, 6#wrap, 7.wrap-sample, 8#top-wrapper { 9 height: 100%; 10} 11 12#wrap { 13 /* position: absolute; */ 14 background: url("../_int/bg.svg"); 15 background-size: cover; 16 background-repeat: no-repeat; 17} 18.wrap-sample { 19 /* position: relative; */ 20 background: url("../_int/sample.svg"); 21 background-size: cover; 22 background-repeat: no-repeat; 23}
HTML
1(index.html) 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8" /> 6 <link rel="stylesheet" href="styles.css" /> 7 <title>Index</title> 8 </head> 9 <body> 10 <div id="top-wrapper"> 11 <div class="wrap-sample"> 12 <!-- 共通部分 --> 13 <header> 14 <a href="index.html">Top</a> 15 <a href="about.html">About</a> 16 <a href="language.html">Language</a> 17 <a href="contact.html">Contact</a> 18 </header> 19 <!-- 共通部分終了 --> 20 <p>this is index.</p> 21 </div> 22 </div> 23 <div id="content-wrapper"> 24 <div class="projects"> 25 <div class="box a">A</div> 26 <div class="box b">B</div> 27 <div class="box c">C</div> 28 <div class="box d">D</div> 29 </div> 30 </div> 31 </body> 32</html> 33
よろしくお願いいたします。
追記)問題点
chrom
完成イメージ
firefox
スマホサイズ縦
スマホサイズ横
パソコンサイズ
スマホサイズ横)重ねてあるSVGが表示されない
パソコンサイズ)重ねてあるSVGが表示されない、画像サイズが小さい