svg 顏色變換寫法


參考網址
http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

如果是檔案的方式(.svg)
/*
     * 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 做變化
前提是必須是svg  code

svg:hover path {
    fill: red;
}

網頁開頭動畫

其實很簡單

網頁進去開始的動畫

當頁面讀取完畢後再呈現所有的畫面語法

第一個宣告綁定
$(window).bind(“load", function() {
loader()
});

 

把它額外寫出來所以就像下面的

第二個動作
function loader(){

var loader = $(“#loader");
//淡出
loader.delay(1350).fadeOut(‘slow’);
setTimeout( function(){
//清除loader裡的html
loader.html(“);
//移除body隱藏
$(“body").removeClass(“bbhidden");;

}, 2550)

};

html

<body class="bbhidden">

</body>

在loader這個div放進要做的效果即可
其餘css設定記得要把它fix在整個螢幕

寫法有很多種但是第一個是必要的