今天练习了多个SVG绘制图形模型
截图：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5-SVG练习</title>
<script type="text/javascript">
//SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
//SVG 用于定义用于网络的基于矢量的图形
//SVG 使用 XML 格式定义图形
//SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
//SVG 是万维网联盟的标准
//与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
//SVG 图像可通过文本编辑器来创建和修改
//SVG 图像可被搜索、索引、脚本化或压缩
//SVG 是可伸缩的
//SVG 图像可在任何的分辨率下被高质量地打印
//SVG 可在图像质量不下降的情况下被放大
//SVG 与 Canvas两者间的区别
//SVG 是一种使用 XML 描述 2D 图形的语言。
//Canvas 通过 JavaScript 来绘制 2D 图形。
//SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
//在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
//Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
//如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
</script>
<style type="text/css">
</style>
</head>
<body>
<!--三角形,折线 - polyline元素,points 点的坐标，x和y轴坐标定位1个点
style：样式；fill填充颜色，stroke线条颜色，stroke-width：线条宽度或者粗细值
-->
<svg width="250" height="250">
<polygon points="100 10,100 100,150 100"
style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;">
</svg>
<!--五角星,折线 - polyline元素-->
<svg width="250" height="250">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
<!--矩形 - rect元素,x：矩形左上角的坐标(用户坐标系)的x值。
y：矩形左上角的坐标(用户坐标系)的y值。
width：矩形宽度。height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径-->
<svg width="250" height="250">
<rect x="10" y="10" rx="20" ry="20" width="150" height="150"
style="fill:transparent;stroke:green;stroke-width:5"/>
</svg>
<!--圆 - circle元素;r：圆的半径。cx：圆心坐标x值。cy：圆心坐标y值。-->
<svg width="250" height="250">
<circle cx="75" cy="75" r="70" stroke="red"
fill="transparent" stroke-width="5" />
</svg>
<!--椭圆 - ellipse元素;rx：半长轴(x半径)。ry：半短轴(y半径)。
cx：圆心坐标x值。cy：圆心坐标y值。-->
<svg width="250" height="250">
<ellipse cx="100" cy="100" rx="70" ry="50" stroke="red"
fill="transparent" stroke-width="5" />
</svg>
<!--直线 - line元素;x1：起点x坐标。y1：起点y坐标。
x2：终点x坐标。y2：终点y坐标。-->
<svg width="250" height="250">
<line x1="10" y1="110" x2="150" y2="150" stroke="red"
fill="transparent" stroke-width="5" />
</svg>
<!--折线 - polyline元素;points：一系列的用空格，逗号，换行符等分隔开的点。
每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)
可以写成："0 0, 1 1, 2 2"。-->
<svg width="250" height="250">
<polyline points="10 240, 60 60, 100 180, 150 200" stroke="orange"
fill="transparent" stroke-width="5" />
</svg>
<!--路径 - path元素:这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，
不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；
此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，
但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
d：一系列绘制指令和绘制参数(点)组合成。-->
<svg width="250" height="250">
<path d="M20,230 Q40,205 50,230 T90,230"
fill="none" stroke="blue" stroke-width="5" />
<!--绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx,ry 是弧的 【半长轴、半短轴】 长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
x,y 是弧终端坐标。
移动画笔指令M：将画笔移动到点(x,y)
画直线指令 L：画笔从当前的点绘制线段到点(x,y)
闭合指令Z：绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。
-->
<path d="M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
</svg>
<!--60度圆弧 -->
<svg width="250" height="250">
<path d="M100 100
A 100 100, 0, 0, 0, 150 186.6
L 200 100 Z"
fill="none" stroke="blue" stroke-width="5" />
</svg>
</body>
</html>
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
