SVG基本图形及clipPath;

时间：2022-12-08 13:44:02

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

相关文章