1

次のように、div 内に svg を配置する必要があります。

<div style="height:100px; width: 300px; border:1px solid red;" >
    <div style="width: 100%; height: 100%; display: table;">
        <div style="display:table-row; height:100%">
            <div style="position: relative; vertical-align: middle; height:100%;">
                <div style="vertical-align: middle; position: relative; margin: 0px auto; height:100%;">
                    <svg viewBox="0 0 485 255" id="damageCanvas" style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" fill="rgba(124,240,10,0.5)" height="100%" width="100%">    
                            <g transform="translate(1,1)">
                                <rect stroke="black" stroke-width="1.5" width="99.5%" height="99.5%" fill-opacity="0" style="padding: 2px 2px 2px 2px"></rect>                    
                            </g>                        
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

問題は、次の SVG がさまざまなブラウザーでさまざまな方法でレンダリングされることです。クロム： ここに画像の説明を入力

ファイアフォックス:

ここに画像の説明を入力

IE9:

ここに画像の説明を入力

クロムバージョンのように画像を拡大縮小したい。どうすればこれを達成できますか?

フィドル: http://jsfiddle.net/Sq5bL/5/

4

1 に答える 1

2

SVG をファイルに保存し、<img>またはを介し​​てリソースとして使用できます<embed>。私は両方を使用しましたが、うまくスケーリングします。<img>は SVG へのアクセスを停止するため、SVG へのアクセスが必要な場合は を使用することをお勧めし<embed>ます。

私の場合、私はしました：

<embed id="gaugeSpeed" class="gaugeImage" width="200" height="200" type="image/svg+xml" src="assets/gauges/speed.svg">

そしてそれはそれをうまくスケーリングしました。<img>タグでSVGを使用する場合も同じです。ICS と Jellybean の両方を実行している Transformer Prime と Nexus 7 でテストしましたが、問題なく動作します。

通常の img またはオブジェクトのように扱われるため、親 div でも問題なく動作するはずです。

さて、あなたはSVGを保持したいので...あなたの問題は

表示: テーブル

2番目のdivで。それをテーブルセルに変更するか削除すると、問題は解決します。

これは、table-cell で動作することを示す JSFiddle です。

于 2012-09-29T04:28:02.150 に答える