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的内容参考，提供以下两个网站：

posted @ 2015-11-06 14:46  Jone_chen  阅读(2816)  评论(0)  编辑  收藏  举报