SVG绘制图形

一、SVG介绍

1、SVG指可伸缩矢量图片

2、SVG用来定义用于网络的基于矢量的图形

3、SVG使用XML格式定义图形

4、SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

5、SVG是万维网联盟的标准

二、SVG的优势

1、SVG图像可通过文本编辑器来创建和修改

2、SVG图像可被搜索、索引、脚本化或压缩

3、SVG是可伸缩的

4、SVG图像可在任何分辨率下被高质量地打印

5、SVG可在图像质量不下降的情况下被放大。

三、绘制SVG图形

<!--绘制圆形 fill为填充颜色、stroke为边框，stroke-width为边框宽度-->
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
    <circle cx="60" cy="60" r="50" fill="red"  stroke="black" stroke-width="3"></circle>
</svg>

<!--绘制椭圆-->
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
    <ellipse cx="60" cy="60" rx="50" ry="25"></ellipse>
</svg>

　　

<svg width="120" height="120" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3" />
</svg>

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1,10,110" fill="none" id="theMotionPath" stroke="lightgrey" stroke-width="3" />
    <circle cx="10" cy="110" r="3" fill="lightgrey"></circle>
    <circle cx="110" cy="10" r="3" fill="lightgrey"></circle>
    <circle cx="" cy="" r="5" fill="red">
        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#theMotionPath"></mpath>
        </animateMotion>
    </circle>
</svg>

<?xml version="1.0"?>
<svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100">
        <animate attributeType="XML" attributeName="x" from="-100" to="120" dur="10s" repeatCount="indefinite"/>
    </rect>
</svg>