SVG

Posted 2020-10-17 瑶狗屎狗屎瑶i

SVG(Scalable Vector Graphics)：指可伸缩矢量图形 矢量图：用相应的算法来计算图形；好处：缩小放大不会失真；坏处：颜色不会更加逼真位图：由一个像素一个像素组成的图形；好处：颜色更加逼真；坏处：缩小放大会失真 <rect>：矩形<circle>：圆形<ellipse>：椭圆<line>：直线<polygon>：多边形 <polyline>：曲线<path>：路径；包括有以下：M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Bézier curveT = smooth quadratic Bézier curvetoA = elliptical ArcZ = closepath以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。<text>：文本 Stroke 属性：（属性定义一条线，文本或元素轮廓颜色）Tstroke- width属性定义了一条线，文本或元素轮廓厚度strokelinecap属性定义不同类型的开放路径的终结strokedasharray属性用于创建虚线SVG可用的滤镜：feBlend - 与图像相结合的滤镜feColorMatrix - 用于彩色滤光片转换feComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffset - 过滤阴影feSpecularLightingfeTilefeTurbulencefeDistantLight - 用于照明过滤fePointLight - 用于照明过滤feSpotLight - 用于照明过滤<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜<feGaussianBlur> 元素是用于创建模糊效果<feOffset>元素是用于创建阴影效果<feGaussianBlur>偏移图像可以变的模糊<feGaussianBlur>元素的stdDeviation属性定义了模糊量css的x,y只能用在SVG里<draggable="true">:拖放dataTransfer.setData() 方法设置被拖数据的数据类型和值ondragover 事件规定在何处放置被拖动的数据ondrag：元素被拖动时运行的脚本。ondragend：在拖动操作末端运行的脚本。ondragenter：当元素元素已被拖动到有效拖放区域时运行的脚本。ondragleave：当元素离开有效拖放目标时运行的脚本。ondragstart：在拖动操作开端运行的脚本。ondrop：当被拖元素正在被拖放时运行的脚本。本地存储： cookie：浏览器和服务器交换数据用的（存在浏览器端的一个对象，大小有限制4KB；在浏览器是用来存储东西的；不是很安全） sessionStorage ：只是存在浏览器端的；存放时间为一次绘画，打开浏览器开始，关闭浏览器结束 localStorage：只是存在浏览器端的；存放时间永久对象转字符串：JSON.strongify字符串转对象：JSON.parse注：如果保存的是对象，那么会被转为字符串，所以在保存之前需要调用