svg
starwmx520
这个作者很懒,什么都没留下…
展开
-
svg 介绍,引用方式
svg是可缩放矢量图形svg文件是纯粹的xml,可伸缩。svg可以在iframe、img embed object svg,还有css background中引用svgpluginspage="http://www.adobe.com/svg/viewer/install/">stroke-width="2" fill="red" />s原创 2016-01-07 17:52:56 · 926 阅读 · 0 评论 -
svg 蒙板
SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧。SVG支持的蒙板类型:1. 裁剪路径(cliping path)裁剪路径是由path,text或者基本图形组成的图形。所有在裁剪路径内的图形都可见,所有在裁剪路径外的图形都不可见。2. 遮罩/蒙板(mask)蒙板是一原创 2016-01-08 14:24:31 · 308 阅读 · 0 评论 -
svg 文档
SVG文档的元素基本可以分为以下几类:动画元素:animate, animateColor, animateMotion, animateTransform, set;解释元素:desc, metadata, title;图形元素:circle, ellipse, line, path, polygon, polyline, rect;结构元素:defs, g, svg, symb原创 2016-01-08 14:21:47 · 1151 阅读 · 0 评论 -
svg 重用与引用
g元素是一种容器,它组合一组相关的图形元素成为一个整体;这样,我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用g元素是可以嵌套的。组合起来的图形元素就和单个的元素一样,可以给id值,这样,需要的时候只用引用这个id值就可以了。组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等),这也是使用组合的一种场景。原创 2016-01-07 18:34:34 · 1082 阅读 · 0 评论 -
svg 坐标
视窗:指网页上可视的矩形局域,视窗坐标系:以左上角开始x向右y各下用户坐标系:同上默认时视窗坐标和用户坐标是一样的,但是这里需要注意,视窗坐标系属于的是创建视窗的元素,视窗坐标系确定好以后,整个视窗的坐标基调就确定了。但是用户坐标系是属于每个图形元素的,只要图形进行了坐标变换,就会创建新的用户坐标系,这个元素中所有的坐标和尺寸都使用这个新的用户坐标系。坐标空间变换:让我原创 2016-01-07 18:33:29 · 419 阅读 · 0 评论 -
svg 颜色
颜色的用法常用的blue,rgb rgba,#fff还有就是渐变渐变一般放在复用标签内,用fill或stroke通过指定url(#id)来使用渐变渐变颜色和比例通过stop设置,offset设置百分比,stop-color设置颜色,stop-opacity:设置透明度x1 y1 x2 y2 设置渐变的方向,默认是水平渐变值是0-1top标签可以应用 class类,在css里原创 2016-01-07 18:31:48 · 2151 阅读 · 0 评论 -
svg 笔画和填充
stroke :边框stroke="red" 设置颜色stroke-width 设置宽stroke-linecap 设置线两头样式 butt:默认 round:圆头 square:默认方形,超出长度stroke-dasharray 设置虚线样式:线长,空长,线长..stroke-linejoin 设置线连接点样式,miter默认,round圆角,bevel切角显示填充和边框原创 2016-01-07 18:30:41 · 814 阅读 · 0 评论 -
svg 文本图像
文本路径 textPath引用复用的标签路径,会把textPath标签内的文字对齐到此路径上I love SVG I love SVGimage 引用图片必须设置width height 且值需要单位image与其他元素一样,是svg的常规元素,所以它支持所有的裁剪,蒙板,滤镜,旋转等效果。支持png,jpg,jpeg,svg等原创 2016-01-07 18:28:15 · 241 阅读 · 0 评论 -
svg 图形绘制
边框线+内容=元素的总宽、高rect:矩形,x y width height 位置和宽高 rx ry 圆角circle:圆 cx cy r 圆心x y 圆半径cllipse:椭圆 cx cy 圆心x y 圆半径 rx ry line:线 x1 y1 开始xy x2 y2结束xypolygon:多边形,points=”x,y x,y“ 点的xy 未设置填充时会用线的样式转载 2016-01-07 18:23:40 · 828 阅读 · 0 评论 -
svg 二次曲线
二次曲线:它有两个位置点分别是线的开始和结束它还有一个控制点开始点M0,0Q px,py endx,endyQ后的点是控制点,第二个点是结束点而绘制出来的曲线高是控制点高-开始点高再除以2如下开始点0,0 控制点高300 (300-0)/2就是绘制的高version="1.1" style="width:320px;">原创 2016-06-03 16:07:02 · 413 阅读 · 0 评论