0

私のウェブサイトのロゴは SVG です。

インライン SVG ロゴを編集可能にする JavaScript をいくつか見つけました。

/*
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

css で色を変更できるようになったので、jQuery プラグイン skrollr: https://github.com/Prinzhorn/skrollr/tree/master/examplesで使用できるので、ロゴの色を変更できます下にスクロールするとき？

これを SVG に追加しようとしましたが、うまくいきませんでした:data-0="fill:rgb(255,0,0);" data-500="fill:rgb(0,0,255);"

以下はそのためのフィドルです。

http://jsfiddle.net/NEhmK/1/

4

1 に答える 1

0

data-0="fill:rgb(255,0,0);" data-100="fill:rgb(0,0,255);"属性をどこに追加していますか？<path>それらをすべての要素に追加すると、うまくいくようです。

<path data-0="fill:rgb(255,0,0);" data-100="fill:rgb(0,0,255);" fill="#6EC5CB"...

CSS などの他の場所に追加した場合<g>、ライブラリがパスに既に存在する塗りつぶしをオーバーライドするとは思わない。

属性をパス タグに追加する場合は、結果を呼び出しdocument.rootElement.getElementsByTagName("path")てループします。例えば

var paths = document.documentElement.getElementsByTagName("path"); 
for (var i = 0; i < paths.length; i++) { 
    paths[i].setAttribute("data-0", "fill:rgb(255,0,0);"); 
    paths[i].setAttribute("data-100", "fill:rgb(0,0,255);"); 
}

または、既存のすべての塗りつぶし属性をパスから削除します。

于 2013-09-07T22:46:51.987 に答える