• 文字サイズ


解決済

背景画像svgファイルをIEで小さくしないためにはどうすればいいでしょうか。

  • 相談者:非公開
  • 2019/12/18 17:39
お世話になっております。
現在、webページを作成しており、画像はAIデータがあること、レスポンシブ対応のため
背景画像も含め、svgファイルを使用しております。

IEで該当ページを開くと、svgファイルの背景画像が、豆粒みたいに小さくなってしまいます。
添付の、svgファイル編集前_IE.jpg ファイルの状態です。

インターネット検索で、
下記サイトのように、
http://webdev.jp.net/svg-size-ie-bug/

widthやheightを指定すればいい、という内容があったのですが、cssには、

background: url(click_here.svg)no-repeat;
background-position: top left 470px;
background-size: 150px;
height: 55px;

などのように、高さ、もしくは幅を使用しています。
また、width: auto; を追記しても変化はありませんでした。

次に、
下記サイトのように、
http://www.fujipro-inc.com/2017/05/31/4785.html

svgファイルのsvgタグ内に、
      preserveAspectRatio="none"
を追記してみたのですが、

添付ファイルの、svgファイル編集前.jpg のようにIEでなって欲しいのですが、
添付ファイルの、svgファイル編集後.jpg のような表示になってしまいます。

背景画像svgファイルをIEで小さくしないためにはどうすればいいでしょうか。
お忙しいところお手数おかけしますが、よろしくお願いいたします。
キーワード:csssvgIE
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2019/12/18 19:17
ECマスターズの伊藤です。

実際のページを拝見して、タグを確認させていただきたいので
該当のページのURLを返信、もしくは
一番最初の投稿の右下にござ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/19 10:25
ECマスターズ 伊藤 様

ただいま、「投稿内容について報告する」よりお送りさせていただきました。
お手数おかけしますが、引き続きどうぞ、よろしくお願いい………(省略)………
  • 返信者:非公開
  • 2019/12/19 15:37
ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

確認したところ
background-size: 150px;
が原因となり………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/20 10:29
伊藤様

ご回答ありがとうございます。

background-size: 150px;
の記述を削除したところ、chromeでは特段変更がありません………(省略)………
  • 返信者:非公開
  • 2019/12/20 15:08
ECマスターズの伊藤です。

> background-size: 150px;
> の記述を削除したところ、chromeでは特段変更がありませんでしたが………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/20 16:37
伊藤様

ご回答ありがとうございます。

お教えいただきましたサイト
SVGを使うときに知っておくといいことをまとめました
https://qiit………(省略)………
  • 返信者:非公開
  • 2019/12/20 19:51
ECマスターズの伊藤です。

> svgファイルをテキストエディタで開いて、svgタグ内にwidthやheightを指定するか、
> AIファイルからsv………(省略)………
  • 返信者:非公開(質問者)
  • 2019/12/23 09:30
伊藤様

ご回答ありがとうございます。

widthやheightを追加しては見たのですが、
preserveAspectRatio については全く認………(省略)………