3

CSSを介して背景画像として使用されるSVG要素を処理するための解決策を見つけようとしています:

.icon.arrow-down
{
    background-image: url( 'images/spritesheet.svg#arrow-down' );
}

:target結合された SVG スプライトシート内の特定のレイヤー (または「グループ」) をターゲットにするために、SVG ファイルで直接使用しています。

<?xml version="1.0" encoding="utf-8" ?>
<svg class="icon" id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50">
    <defs>
        <style>
            rect, line { shape-rendering: crispEdges; }
            svg .icon { display: none; }
            svg .icon:target { display: inline; }
        </style>
    </defs>

    <!-- Arrows -->
    <g class="icon" id="arrow-down" transform="translate(0,12.5)">
        <path fill="#F00" d="M 0,0 50,0 25,25 z" />
    </g>
    <g class="icon" id="arrow-up" transform="translate(0,12.5)">
        <path fill="#F00" d="M 0,25 50,25 25,0 z" />
    </g>
    ...
</svg>

#profileこれは Firefox と IE9+ では問題なく動作しますが、Chrome ではその部分を無視しているようです。ただし、ターゲット ID を使用してブラウザーで直接 SVG シートに移動すると、正しい画像が得られます。

:targetこれは、Chrome が背景画像を処理する方法のバグですか?

すべてを独自のファイルに分割する必要がないようにしようとしているので、ダウンロードされるリソースは 1 つだけですが、まだ可能かどうかはわかりません。

アイコンが Chrome では表示されず、他のブラウザーでは表示されることに注意してください: http://jsfiddle.net/sYL5F/1/

4

2 に答える 2

3

これは既知の問題であり、背景として使用することに固有のものであり、セキュリティ上の懸念から修正されないようです (Opera にも表示されません)。SVG を直接表示すると、期待どおりに動作します。

https://code.google.com/p/chromium/issues/detail?id=128055#c6

SVG スタックは、CSS イメージ値を取る CSS プロパティではサポートされません。これには、background-image、mask-image、border-image が含まれますが、これらに限定されません。

これは、CSS の解析時にリソース (SVG グラデーション、マスク、clipPath など) と画像値を区別するための SVG および CSS WG の解決策です。これは、ユーザーのプライバシーと安全を保護するためのセキュリティ要件です。

詳細については、次の説明を参照してください。

http://lists.w3.org/Archives/Public/www-style/2012Oct/0406.html

http://lists.w3.org/Archives/Public/www-style/2012Oct/0765.html

昔ながらのスプライト マップと同じ方法で SVG を処理するだけです。

于 2013-04-16T17:02:06.997 に答える
0

私の最新のプロジェクトでは、私が取り組んできた PHP MVC フレームワークを使用してカスタム SVG パラメーターを作成する独自の方法を実装しました。基本的に、アイコンにリンクするためのコントローラーを作成しました。

/icon/NAME_OF_ICON.svg?color=F00

私のiconコントローラーはファイル名を受け取り、GET パラメーターを SVG ファイルに挿入します。

//define( ROOT, "path/to/webroot" );
//$filename = ...get filename from URL...;

$svg = simplexml_load_file( ROOT . "/assets/icons/{$filename}" );
if( isset( $_GET['color'] ) )
{
    $svg->path->addAttribute( 'fill', '#' . $_GET['color'] );
}

header( "Content-type: image/svg+xml" );
echo $svg->asXML( );

最終的には、クエリされたカスタム SVG をキャッシュするコードを追加する予定です。

于 2014-05-20T17:32:04.937 に答える