0

2 つの svg ファイルが1.svgあり2.svg、次のように HTML ページに配置したいと考えています。

[1.svg]
[2.svg]

これらがページ上の唯一の要素になるように設定し、ブラウザーのサイズを変更すると、svg に対応する各 .svg の背後に 2 つの異なる背景色が表示されるようにします。

これを設定した方法は、2 つの異なる div を実行することでした。

<div class="top_body">
    <object data="images/1.svg" class="bg_top" type="image/svg+xml"></object>
</div>
<div class="bottom_body">
    <object data="images/2.svg" class="bg_bottom" type="image/svg+xml"></object>
</div>

これらを次のようにスタイルします。

.bg-top {
  height:100%;
  width:100%;
  margin:0px;
}

.bg-bottom {
  width:100%;
  margin:0px;
}


.top_body {background-color:#{some color}  ;}
.bottom_body {background-color:#{some other color}  ;}

しかし、次の 2 つの問題があります。

  1. SVG要素が中央に配置され、両側に空白がないことを確認したい(現在、左側に空白がある)

  2. ブラウザ ウィンドウのサイズ変更に合わせて要素が動的にスケーリングされるようにしたい

これは私のcssを微調整することの問題だと確信しています。ここに何かポインタはありますか?

4

3 に答える 3

0 
.bg-top {
  height:100%;
  width:100%;
  margin:0px auto;
}

.bg-bottom {
  width:100%;
  margin:0px auto;
}


.top_body {background-color:#{some color}  ;}
.bottom_body {background-color:#{some other color}  ;}

HTH

于 2013-08-05T03:25:25.490 に答える