4

SVG 画像を背景画像の html div 要素として使用したいと思います。SVG は、埋め込まれている div に応じて引き伸ばされる必要があります。これは Google Chrome では問題なく動作しますが、Firefox では、SVG はサイズ変更時に幅と高さの比率に固執し、引き伸ばされません。を使用してpreserverAspectRatio = "none"います。

SVG は次のようになります。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95">
<g
 id="layer1">
<path
   d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z"
   id="path3015"
   style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" />
</g>
</svg>

HTML は次のようになります。

<div style="
      width: 250px; 
      height: 200px; 
      background-image:url(file.svg); 
      background-repeat:no-repeat;">
          test
 </div>

Chrome では、div 要素の幅/高さを変更でき、元の幅/高さの比率を気にせずに SVG 画像が引き伸ばされます。この動作は意図されたものです。Firefox では、サイズが変更され、元の比率が維持されます。どうすればこれを変更できるか知っていますか？ありがとう

4

1 に答える 1

16

background-size: 100% 100%;あなたの「スタイル」に追加してみてくださいdiv（私にとってはうまくいきます）。

于 2012-05-18T06:31:29.143 に答える