Q&AIE11で背景画像にSVG画像を使ってrepeatさせたい
/ ←この形のsvg画像を作り、背景画像に指定して、repeat-xさせて、
↓こういったボーターを作りたいんですが、
//////////////////////////////////////////
↓IE11だけこうなってしまいます（リピートされない）
/
IE11以外のchromeやMacのブラウザでは大丈夫でした。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>テスト</title> 6</head> 7<body> 8<hr> 9</body> 10</html>
css
1hr { 2 height: 8px; 3 background: url(../images/hr.svg) repeat-x 0 0; 4 border: 0; 5}
svg
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.12 17.12" preserveAspectRatio="xMinYMid"><defs><style>.cls-1{fill:#e50044;}</style></defs><title>アセット 2</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="レイヤー_2-2" data-name="レイヤー 2"><rect class="cls-1" x="-2.05" y="7.06" width="21.21px" height="3px" transform="translate(-3.55 8.56) rotate(-45)"/></g></g></svg>
試したこと
調べたところ、
・SVGタグに「preserveAspectRatio=”xMinYMid”」を追記
するとのことなので追記しました。でもダメでした。
↓参考サイト
https://qiita.com/soh-web/items/e4d2209b896d8ad70d35
回答2件
0
IEは、width, height がないと大きさを認識できません。
なので、
SVG
1<svg width="8" height="8" ...>
とするか、CSS で background-size を指定します。
https://developer.mozilla.org/ja/docs/Web/CSS/background-size
参考サイトにも width, height のことが書いてありますよ？
投稿2019/03/14 04:07
総合スコア13749
0
自己解決
svg画像では難しそうなので別の方法を探そうと思います。
投稿2019/03/09 11:00
総合スコア81
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/14 10:24