7

CSS で背景画像として使用する SVG ファイルを作成しました。次のように、クエリ文字列パラメーターを使用して SVG の塗りつぶしの色を変更できるようにしたいと考えています。

#rect     { background-image: url( 'rect.svg' ); }
#rect.red { background-image: url( 'rect.svg?color=red' ); }

私が理解しているように、SVG でスクリプト タグを使用すると、colorパラメーターを取得して塗りつぶしの色を更新できます。SVG の例を次に示します。

<!DOCTYPE svg PUBLIC "-//W3C//DDTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" />

    <script>
    <![CDATA[
        var params = { };
        location.href.split( '?' )[1].split( '&' ).forEach(
            function( i )
            {
                params[ i.split( '=' )[0] ] = i.split( '=' )[1];
            }
        );

        if( params.color )
        {
            var rect = document.getElementsByTagName( "rect" )[0];
            rect.setAttribute( "fill", params.color );
        }
    ]]>
    </script>
</svg>

ファイルに直接アクセスするか、object タグを使用するとうまくいくようですが、CSS の背景画像または img タグの場合、color パラメータは無視されます。

ここで何が起こっているのか正確にはわかりません。私が達成しようとしていることに対する説明または代替ソリューションがあることを望んでいました (できればサーバー側の処理に頼ることなく)。

これは、さまざまなレンダリング方法を示す jsFiddle です: http://jsfiddle.net/ehb7S/

4

2 に答える 2

2

最終的に、SVG ファイルに塗りつぶしを挿入できるサーバー側のソリューションを作成しました。基本的に、すべての SVG リクエストを PHP ファイルにリダイレクトし、次の処理を行います。

$filename = $_SERVER['SCRIPT_FILENAME'];

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

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

明らかに、キャッシングの処理など、それよりも少し多くのことがありますが、それはミートアンドポテトです。fill属性が既に存在するかどうかも確認したい場合があります。

于 2014-04-07T15:47:53.430 に答える