SVG
文章平均质量分 65
earth_small_ma
这个作者很懒,什么都没留下…
展开
-
如何使用SVG和简单图形绘制(1)
如何使用SVG和简单图形绘制(1)SVG(Scalable Vector Graphics——可缩放矢量图),SVG图在放大或缩小的情况下不会失真在SVG中全部使用标签来绘图,这些标签就相当于平时的html标签SVG的使用SVG的使用很简单,只需要添加一个svg标签即可#svg{ width: 500px; height: 500px; bord...原创 2018-07-24 23:34:57 · 8218 阅读 · 0 评论 -
path元素(2)
path元素(2)path元素用于确定一条路径,需要配合相应的指令才能使用M/m指令与L/l指令M/m相当于canvas中的moveTo,L/l指令相当于canvas中的lineToM/L是依照绝对坐标确定点,m/l是依照相对坐标确定点path{ stroke: black;}<svg id="svg"> <path d="M 1...原创 2018-07-24 23:37:36 · 607 阅读 · 0 评论 -
SVG路径动画(3)
SVG路径动画(3)stroke-dasharray该css属性主要用于在SVG中创建各种虚线#line1{ stroke: black; stroke-width: 10px; stroke-dasharray: 15 7 5 5 5 7; /*表示:画15px长,空7px,画5px长,空5px,画5px,空7px,后面则循环此过程 所...原创 2018-07-24 23:40:21 · 1346 阅读 · 0 评论 -
SVG渐变(4)
SVG渐变(4)径向渐变#svg{ width: 500px; height: 500px; border: 1px solid #ccc;}<svg id="svg"> <defs> <radialGradient id="gradient" cx="50%" cy="50%" r=&qu原创 2018-07-24 23:41:21 · 407 阅读 · 0 评论 -
SVG之viewport、viewBox、preserveAspectRatio(5)
SVG之viewport、viewBox、preserveAspectRatio(5)viewportviewport表示SVG可见区域大小(或者说SVG的画布大小)如:<svg width="500" height="500"></svg>这儿的viewport大小就是500 X 500viewBoxviewBox是svg标签中的一...原创 2018-07-25 12:03:29 · 364 阅读 · 0 评论 -
SVG之获取路径长度,创建获取SVG元素(6)
SVG之获取路径长度,创建获取SVG元素(6)说明:代码中,所有的namespace(命名空间)是固定的。需要记住,这是对SVG元素进行DOM操作所必需的获取SVG元素注意:是获取SVG元素哦!不是svg元素。意思就是获取所有SVG标签元素document.getElementsByTagNameNS(namespace, ‘SVG标签名’)上述方法用来获取SVG元素...原创 2018-07-26 20:51:37 · 7910 阅读 · 0 评论