多语言展示
当前在线:1959今日阅读:27今日分享:41

如何使用SVG技术绘制不同方向的三角形

SVG技术可以绘制不同的图形,如直线、折线、三角形、矩形、圆形和多边形等。还可以根据不同的坐标转换角度和方向,可以让人感觉不一样的图形美感。下面利用一个实例说明SVG技术绘制不同方向的三角形,操作如下:
工具/原料
1

SVG

2

XML

3

HTML5

4

HBuilder

5

浏览器

6

截图工具

方法/步骤
1

第一步,双击打开HBuilder编辑工具,新建静态页面sanjiaoxing.html,如下图所示:

3

第三步,在插入一个,设置三角形三个点坐标,以及填充颜色等,如下图所示:

4

第四步,保存代码并预览该静态页面,查看页面效果,发现生成一个等腰直角三角形,如下图所示:

5

第五步,调整三角形三个点的坐标,将三角形旋转一下,如下图所示:

6

第六步,再次保存代码并预览图形,发现三角形旋转了,如下图所示:

注意事项
1

注意SVG技术绘制三角形的方法

2

注意三角形三个点坐标设置

推荐信息