CSSとSVGによるホバー時のバックグラウンド画像拡大

CSSとSVGを使って、ホバー時のバックグラウンド画像拡大サンプルです。縦横200pxの円のバックグラウンドにSVG画像をリピートして連続模様を描いています。この円の上にマウスがのると、CSS transitionを使ったアニメーション効果が発動して、SVG画像を円一杯に拡大します。このとき、画像が小さなときには見えなかった文字「Welcome」が読めるような仕掛けにしてあります。

#welcome {
    width: 200px; height: 200px;
    margin: auto;
    border-radius: 100px;
    cursor: pointer;    
    background: #37f url(../svg/012b-ex.svg);
    background-position: 20% 20%;
    background-size: 20px 20px;   
    -moz-transition: background-size 1s linear 0 , width 1s linear 0 , height 1s linear 0;
    -webkit-transition: background-size 1s linear 0 , width 1s linear 0 , height 1s linear 0;
    -o-transition: background-size 1s linear 0 , width 1s linear 0 , height 1s linear 0;
    -ms-transition: background-size 1s linear 0 , width 1s linear 0 , height 1s linear 0;
	transition: background-size 1s linear 0 , width 1s linear 0 , height 1s linear 0;
    }
#welcome:hover {
    background-size: 200px 200px;
    }