SVG基本圖形及clipPath;

利用SVG可以實現很多復雜的圖形，SVG的功能開發者們已經開發許多，今天初識一下SVG的基本圖形繪制，

<svg viewbox="0,0,400,400" style="background: red;" width="400"  height="400">
    <circle r="100" cx="200" cy="200" fill="blue" stroke="#f90" stroke-width="10"  />
    <rect x="200" y="200" width="300" height="300" fill="red" stroke="black" stroke-width="2" rx='10' ry="10" fill-opacity="0.4" transform="translate(-150,-150)" />
    <polygon points="10 20,30 20,20 30" fill="#652" stroke="black" stroke-width="2"/>
</svg>
<div class="" id="box"></div>
<script>
        window.onload=function(){
            var cirle=document.querySelector("circle");
            var rect=document.querySelector("rect");
             var cx=cirle.getAttribute('stroke');
            console.log(cx);
             cirle.setAttribute("stroke-dasharray",3+' '+Math.PI*2*100/45)
            //打印屬性函數；
            function message(obj) {
                var sm='';
                for (var i in obj) {
                    sm += i +'，'+ obj[i] + '<br/>';
                }     
                return sm;
            }
             document.getElementById('box').innerHTML=message(cirle);
        }

</script>

在上面的代碼中，我們可以看到繪制了圓，矩形，多邊形，關於這些圖形的基本屬性在上面的代碼已經得到了很好的體現，並且有一個transform屬性，這個和CSS3的transform區別不大，唯一需要注意的是css3的transform變換的時候，坐標是基於中心點的，而svg的transform變換的原點是在左上角的；當然這兩個變換的原點都是可以重新設定的；

而在JS代碼中，我們打印出了svg最基本的屬性，打印之后，發現不同的瀏覽器對SVG的支持並不一致，在firefox和chrome中差別很大；有興趣的伙伴們可以測試一下；

-------------------------分割線-------------------------

<svg>
        <defs>
            <clipPath id="clipPath">
                <text x="10" y="70" fill="red" style="font-size: 40px;" >我是中國人</text>
            </clipPath>
        </defs>
        
        <g style="clip-path:url(#clipPath)">    
            <rect x="10" y="30" width="200" height="100" fill="red" />
             <circle r="10" cx="110" cy="55" fill="blue" />
        </g>
</svg>

在上面的代碼中，是關於svg clipPath的，不得不說clippath這個裁剪功能確實強大！！待續....

關於SVG的內容參考，提供以下兩個網站：

• SVG Clip Path
• Clipping and Masking in CSS