IE8以下でも半透明ボーダー (3)

Raphaël (SVG/VML)でも試してみたのでいちおう記録しておく。実用するのは 前回 の実装でよいと思うが。IE8での動作負荷も前回のやつの方が軽い気がする。

<img class="hoverTransBorderSVG" src="img.jpg">
<script>

$.fn.hoverTransBorderSVG = function( arg ){
    var opt = $.extend(true,{
         width  : 30
        ,color  :'#fff'
        ,opacity: 0.6
    },arg);
    opt.width *= 2;
    return this.each(function(){
        var img = this;
        var onload = function(){
            var W = img.width;
            var H = img.height;
            var $paper = $('<div/>').css({
                 position:'absolute'
                ,left    : 0
                ,top     : 0
                ,width   : W
                ,height  : H
            });
            var paper = Raphael( $paper[0] ,W ,H );
            var image = paper.image( img.src ,0 ,0 ,W ,H ).attr({
                 'fill'         :'rgb(255,255,255)'
                ,'fill-opacity' : 0.01
            });
            var border = paper.rect( 0 ,0 ,W ,H ).attr({
                'stroke-opacity': opt.opacity
            });
            var $wrap = $('<div/>')
            .attr('style',$(img).attr('style'))
            .attr('class',$(img).attr('class'))
            .css({
                 position :'relative'
                ,width    : W
                ,height   : H
            })
            .hover(function(){
                border.stop().animate({
                     'stroke'      : opt.color
                    ,'stroke-width': opt.width
                } ,80 ,'>');
            },function(){
                border.stop().animate({ 'stroke-width':0 } ,20 ,'>');
            });
            $(img).wrap( $wrap ).before( $paper );
        };
        if( img.height >0 ) onload();
        else $(img).on('load',onload);
    });
};
$('.hoverTransBorderSVG').hoverTransBorderSVG();

</script>

気になったけどスルーした現象。

• Raphaël版はIE8でなぜか上下左右ボーダー幅が微妙に同じではない感じ。
• 全てに共通して、Firefoxでhover対象の<img>がブラウザにより拡大縮小されていた時に、枠が1pxほどズレてしまうことがあった。