怎么用手机制作手机网站,软件技术和软件工程一样吗,在internet上建设网站,自己怎样优化网站使用svg生成图像
每个HTML开发人员都应该对可伸缩的向量图形有一个基本的理解。本文会通过使用svg创建一个雨伞图像来介绍一下svg的基本知识。
svg介绍
SVG 意为可缩放矢量图形#xff08;Scalable Vector Graphics#xff09;。是一种可以在HTML中创建图像的方式。
我们…使用svg生成图像
每个HTML开发人员都应该对可伸缩的向量图形有一个基本的理解。本文会通过使用svg创建一个雨伞图像来介绍一下svg的基本知识。
svg介绍
SVG 意为可缩放矢量图形Scalable Vector Graphics。是一种可以在HTML中创建图像的方式。
我们可以在undraw、getwaves网站上下载一些喜欢的图案。
可以在任何文本编辑器中创建svg文件。这些文件是纯XML,类似于HTML。
svg version1.1 xmlnshttp://www.w3.org/2000/svg
/svg实际上svg上手其实很容易上面就是编写svg文件的简单程度。
文件后缀
用.svg 或.html扩展名创建一个文件。建议使用.svg后缀。
使用svg标签包裹住所有的元素所有的代码在写在svg内
svg version1.1 xmlnshttp://www.w3.org/2000/svg
viewBox0 0 200 200 width500 height500...
/svgversion不是必须的但是xmlns一定要携带否则,浏览器并不会呈现图像。
通常svg坐标系从左上角开始(0,0),右下角坐标系(width, height)也就是整个svg的宽高。
但是使用viewBox 可以改变这个。在上面的代码示例中,坐标设置为从左上角的(-100,-100)最前面两个。viewBox的最后两个参数是它的高度和宽度(200, 200).因此,左下角的坐标是(-100宽度,-100高度)也就是(100,100)。
画圆
让我们在viewBox中设置生成一个圆。
circle cx0 cy0 r10/在这里,cx代表X坐标,cy 代表y坐标,还有 r 指圆的半径。 注: 不设viewBox ,我们会得到完全不同的结果,因为(0,0)意味着左上角。在设置后viewBox ,我们把最左边的位置变成了(-100,-100)。
用stroke改变边框颜色,用fill改变圆环颜色。颜色可以使用RGB、十六进制、HSL或者直接直接定义。
circle cx0 cy0 r10 stroke#00ff00 fillgreen/画矩形
现在让我们画一个长方形。 rect x-20 y-10 width40 height20/x代表x坐标,y 代表y坐标也就是离(0,0)的距离。width宽度height高度。 同样可以通过stroke、fill改变颜色。
rect x-20 y-10 width40 height10/
rect x-20 y-40 width10 height70/
rect x20 y-40 width10 height70/画一个六边形
使用多边形标记来定义点。
polygon points0,-50 40,-25 40,25 0,50 -40,25 -40,-25/坐标从顶部开始然后顺时针标记。
使用path定制路径
上面提到的几种都是固定形状的而利用 path 可以实现定制路径。我们可以定义一组点画曲线做形状。
path dCOMMANDS/d是指画画。COMMANDS指的是命令例如: M - 移动到L - 行到, Q - 二次贝齐尔。查看完整的命令列表
M -50 0 L 50 0 意思是M表示的点移动到(-50,0)L表示的点并从(-50, 0)那里画一条线到用(50,0)。当使用L时,它是绝对的定位。
当使用小写时则意味时相对定位也就是距离上一个坐标的位置m -50 5 l 40 -3点移动到(-50,0)然后向右移动40后向下移动3。
对于所有其他命令,这个大大写和小大写规则也是相似的。大写意味着绝对的位置,大写意味着相对的位置。
画三角形
让我们用path做一个三角形。
path dM -50 0 L 0 -50 50 0 fillblue/画一个二次曲线
二次曲线是这样的: 从图像中,我们看到我们只需要3点:起点A、控制点C和终点B。上面曲线的命令(蓝色)是·M -40 0 Q 0 -90 40 0· 我们移动到一个点(-40,0),然后是二次曲线命令Q。(0,-90)是控制点C(40,0)是终点B。
我们用这种方式做伞的顶部部分。 基本上只是在曲线上加曲线
gpath dM -50 0 Q 0 -70 50 0 fill#37ada7/path dM -35 0 Q 0 -70 35 0 fill#18857f/path dM -20 0 Q 0 -70 20 0 fill#37ada7/path dM -7.5 0 Q 0 -70 7.5 0 fill#18857f/
/gg 就像是html中div的元素单独使用是无用的但是可以有子元素。我们将许多元素组合在一起,并将它们全部移动到一边。
让我们把雨伞移到右边50个单位,把3个单位上升
g transformtranslate(50,-5)
...
/gtranslate控制位置和旋转.在上面的例子中,我们将它向右移动了50个单元,然后向下移动了-5个单元(或者上升了5个单元)我们可以用同样的方式旋转雨伞. 使用polygon画一个把手。
polygon points-2,0 2,0 2,65 -2,64.9/再创建一个二次曲线在把手处放一个弯曲的头。 最终代码
svg version1.1 xmlnshttp://www.w3.org/2000/svg
viewBox-100 -100 200 200 width500 height500
gpath dM -50 0 Q 0 -70 50 0 fill#37ada7/path dM -35 0 Q 0 -70 35 0 fill#18857f/path dM -20 0 Q 0 -70 20 0 fill#37ada7/path dM -7.5 0 Q 0 -70 7.5 0 fill#18857f/
/g
polygon points-2,0 2,0 2,65 -2,64.9/
path dM -.3 64 Q 5 75 10 57 strokeblack fillblack stroke-width4/
g classraindroppath dM -76 81 Q 81 81 -64 81 fill#99edf3/polygon points-84,-20 -76,-20 -80,-27 fill#99edf3/
/g
/svg
