6

JavaScriptを使用してSVG URLに指定されたハッシュに基づいて線の色を変更するSVG(クロス)があります。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1" />
    <line x1="100%" y1="0" x2="0" y2="100%" stroke="black" stroke-width="1" />

    <script>
        if (window.location.hash) {
            document.getElementsByTagName('line')[0].setAttribute('stroke', location.hash);
            document.getElementsByTagName('line')[1].setAttribute('stroke', location.hash);
        }
    </script>
</svg>

これは<object>要素 ( ) としては問題なく機能しますが、または css<object type="image/svg+xml" data="img/svg/cross.svg#ff0000"></object>としては失敗します。imgbackground-image

これを CSS として機能させるにはどうすればよいbackground-imageですか?

4

2 に答える 2

8

HTML 画像として使用される SVG の動的動作は、セキュリティ上の理由から無効になっています。理由は明らかです。別のドメインの SVG 画像を使用できますが、ドキュメントのコンテキストで JavaScript コードを実行する必要はありません。そのため、HTML 画像として使用される SVG は基本的に常に静的です。http://www.schepers.cc/svg/blendups/embedding.htmlに詳細がいくつかあります(このリンクについて @ RobertLongsonに感謝します)。

Firefox には回避策があります。インラインSVG コード (非表示にできる) がある場合は、 filterCSS プロパティを使用してその SVG コードからフィルターを使用できます。達成しようとしていることに応じて、これはかなり強力なツールになる可能性があります。MDN によると、Chrome と Safari もこれをサポートするはずですが、サポートしているかどうかはわかりません。

于 2013-05-30T14:01:57.243 に答える
5

私は自分に合った解決策を見つけました。私も Sass を使用しており、base64 エンコード プラグインを見つけました。それを使用して、CSS に svg を記述し、それを base64 にエンコードできます。また、変数を使用することもできます。SASS コードは次のようになります。

background: url('data:image/svg+xml;base64,'
                + base64Encode('<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#{$color-line}" stroke-width="1" /><line x1="100%" y1="0" x2="0" y2="100%" stroke="#{$color-line}" stroke-width="1" /></svg>'));

base64 プラグインは次の場所にあります: Compass/SASS の URL または Base64 エンコード文字列

于 2013-05-31T13:26:12.790 に答える