🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Microsoft Edge

Microsoft Edgeは、マイクロソフト社が開発する新しいWebブラウザです。Windows 10から標準搭載されており、Internet Explorerとは違うレンダリングエンジンが採用されています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

3回答

4944閲覧

SVG)ブラウザによって表示が変わってしまう

TAIniko

総合スコア32

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Microsoft Edge

Microsoft Edgeは、マイクロソフト社が開発する新しいWebブラウザです。Windows 10から標準搭載されており、Internet Explorerとは違うレンダリングエンジンが採用されています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/10/23 02:41

編集2019/10/23 04:17

環境
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が表示されない、画像サイズが小さい

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/10/23 02:54

どのブラウザでどのように表示が変わりますか?
TAIniko

2019/10/23 03:14

(chrom)では自分の思ったとうりに表示されるのですが、 (firefox)bg.svgのサイズが小さい、sample.svgが表示されない (edge)svg画像の色が指定したいろではなく真っ黒になる、色の指定を>fill="red"このようにするとちゃんと色が表示されます ※sample.svgとbg.svgのファイル名については追記しておきました
guest

回答3

0

cssで bg.svg の指定された E#wrap がHTMLに見つかりませんでしたので、書き換えてみました。

css

1/* #wrap, */ 2#top-wrapper { 3 /* position: absolute; */ 4 background: url("bg.svg"); 5 background-size: cover; 6 background-repeat: no-repeat; 7} 8

当方、確認環境:Chromium(on LaspberryPi)です。

投稿2019/10/30 03:16

AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TAIniko

2019/10/31 05:02

指摘していただいた個所を修正してみましたが、やはりfirefoxだとうまくいきません。。。 ブラウザの幅?を小さくしていくとしたから上に重ねたSVGが出てきました。 なので、firefoxではどうやら設定した画像を拡大して表示しているようです。 そのためフルスクリーンだと画像の一部分しか見えない。 これはどのように解決できますか?
AkitoshiManabe

2019/10/31 05:22

レスポンシブは縦横がライブラリ依存なんですよね。けど、重なり順(zIndex)は弄ってもよさそうに思いました。スマホの回転にも対応するには META[name=viewport]が重要だったんじゃないかな。私がCSSで躓いたときは、関連しそうなプロパティ(他のコメントをも参考にSVGの関連属性も含む)の組み合わせをメモ用紙に書き出して消去法でアナログにチェックしてます。
guest

0

ブラウザによって表示が変わってしまいます。

の具体的な内容がわからないのですが。
svgに、preserveAspectRatio="none"が設定されているため、縦横比を無視して変形してしまう、とかでしょうか?
その場合は、svgタグ内のpreserveAspectRatio="none"を削除すれば、縦横比を維持すると思います。

また、yambejpさんの指摘しているように、色の指定が内容はrgbaなのにrgbとかかれているので、fill="rgba(255, 153, 50, 0.7)"にすると色に関しては変わるかもしれません。

投稿2019/10/23 03:18

m_o

総合スコア109

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TAIniko

2019/10/23 04:36

いろにかんしては解決いたしました。ありがとうございます! preserveAspectRatio="none"を消去してみたのですが、 chromでもfirefoxでも、「重ねてあるSVGが表示されない + サイズが小さい」。という風になってしまいました。4枚目の画像のとうりです。
guest

0

ブラウザによって表示が変わってしまいます

具体的に何が違うことを指摘しているのでしょうか?
色の違いについては「rgb→rgba」でいけるかもしれません。
一部ブラウザはrgbに透明度を指定できません

投稿2019/10/23 02:53

yambejp

総合スコア116694

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TAIniko

2019/10/23 03:58 編集

追記させていただきました。 よろしくお願いいたします。 色については指摘していただいたとうり、rgbaで解決しました! ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問