10

さまざまな情報源から、svg の vector-effect="non-scaling-stroke" が現在のバージョンの Opera、Firefox、および Chrome で動作するはずであることがわかりました。（IE10についてはわかりません）。

ただし、Opera と Firefox でしか機能せず、画像として直接埋め込まれている場合にのみ、CSS で背景画像としてスケーリングされている場合は機能しません。

私の質問:

なぜクロムではないのですか？

背景画像ではないのはなぜですか？

これをすべての最新ブラウザで使用できる標準的な方法はありますか?

フィドルの例。

HTML :

<div><img src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div><img id="one" src="http://dl.dropbox.com/u/60476509/close.svg" /></div>
<div id="two"></div>
<div id="three"></div>

CSS :

#one {
    width: 200px;
    height: 200px;
}

#two {
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
    height: 100px;   /* native size */
    width: 100px;
    background-size: contain;        
}
#three {
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg");
    height: 200px;
    width: 200px;
    background-size: cover;        
}
4

2 に答える 2

4

ボンネットの下で何が起こっているのかわかりませんが、少なくともインライン SVG の場合 (背景についてはわかりません)、より簡単な解決策があります。変化する：

<img src="svg-source.svg"/>

に：

<object type="image/svg+xml" data="svg-source.svg"></object>

さらに、svg ドキュメントに対してviewBox定義したことを確認する必要があります。

この回答によると、objectとにかく使用することをお勧めします。これは、（クロスブラウザーの互換性のために）推奨する適切なブログ投稿です。

<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>

この後者のオプションはテストしていませんが、機能する場合は、このソリューションよりもはるかに簡単です。

編集:埋め込みオブジェクトとして、SVG が「ホバー」および「クリック」イベントに干渉していることを発見したため、最終的に腰を下ろし、SVG を完全に埋め込む必要があると判断しました。しかし、私はすべてを貼り付けることに興味がなかったので、JavaScriptファイルの上部に次のものがあります(私はJQueryを使用しています):

$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}

今では代わりに<img src="svg.svg"/>書くことができます<div class="deferred-load" data-load="svg.svg"></div>。

もちろん、これは Javascript を有効にしないと機能しません。しかし、醜い XML をすべて貼り付けるよりははるかに優れています。

于 2013-06-23T04:34:57.810 に答える