前提・実現したいこと
該当htmlでsvg画像を下線に接するように配置したい
発生している問題・エラーメッセージ
background-positionでbottomを指定しても謎の余白が入ってしまい
下線に接するような配置にできません。
イラストレーターで開いても余白は無いので原因が知りたいです。
またほかのsvgで試したところちゃんと下に配置されるのでこのsvgの問題だとは思います。
該当のソースコード
svg
1<!-- hoge.svg --> 2<svg 3 xmlns="http://www.w3.org/2000/svg" 4 xmlns:xlink="http://www.w3.org/1999/xlink" 5 width="30.339mm" height="150.636mm"> 6<path fill-rule="evenodd" opacity="0.502" fill="rgb(226, 222, 215)" 7 d="M-0.000,36.000 L86.000,-0.000 L86.000,391.000 L-0.000,427.000 L-0.000,36.000 Z"/> 8</svg>
html
1<!-- 確認用 --> 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <style> 7 .test { 8 background-image: url(hoge.svg); 9 background-position: left bottom; 10 background-repeat: no-repeat; 11 } 12 .box { 13 width: 700px; 14 height: 700px; 15 border: solid 1px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="test"> 21 <div class="box"></div> 22 </div> 23 </body> 24</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/07 08:32