SVG绘制图形

web.jpeg

图片的认知

• 分为：位图和矢量图
• 位图
  • 位图是有一个个小方块组合的图片,一个小方块代表1px
  • 比如：jpg,png,gif等都是位图
  • 优点：色彩逼真，缺点是：图片放大容易失真
• 矢量图
  • 矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片
  • 优点:放大不失真，缺点:绘制起来比较复杂

SVG 标签绘制矢量图

• SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图
• 默认是有宽度（300）和高度(150)的
• 可以通过css样式设置宽高，也可以通过行内样式设置

SVG 绘制直线

• x1/y1设置起点
• x2/y2设置终点

<svg>
    <line x1="100" y1="100" x2="100" y2="400" stroke="#ccc"></line>
</svg>

SVG 绘制直线折线

• polyline
• points:设置所有的点

<svg>
 <polyline points="100 100 300 100 300 300" stroke="#000" fill="none"></polyline>
</svg>

SVG 绘制多边形

• polygon 的标签

<svg>
 <polygon points="100 100 300 100 300 300" stroke="red"></polygon>
</svg>

SVG 绘制矩形

• rect
• x/y 是秒点的位置
• width/height 宽度和高度
• fill:填充的颜色
• stroke:描边颜色
• stroke-width:描边的宽度
• rx/ry设置圆角半径

<svg>
  <rect x="100" y="100" width="100" height="100" fill="red" stroke="blue" stroke-width="10" rx="10"></rect>
</svg>

SVG 绘制圆和椭圆

• 根据绘制矩形的rx/ry的修改
• 圆形

<svg>
    <rect x="100" y="100" width="100" height="100" fill="red" stroke="blue"  rx="50"></rect>
</svg>

• circle 绘制圆
• ellipse 绘制椭圆

<svg>
  
  
    <!--绘制圆-->
    <circle cx="100" cy="100" r="50"></circle>

    <!--绘制椭圆-->
    <ellipse cx="200" cy="200" rx="100"  ry="50"></ellipse>


</svg>

SVG中一些常用的属性
fill: 修改填充颜色
fill-opacity: 0~1 设置填充颜色的透明度
stroke: 修改描边颜色
stroke-width: 修改描边宽度
stroke-opacity: 0~1 设置描边透明度
stroke-linecap: butt/square/round 设置线段两端帽子
stroke-dasharray: 设置虚线
stroke-dashoffset:设置虚线偏移位
stroke-linejoin: miter/bevel/round设置折线转角样式

SVG绘制路径

• SVG的路径
  • M = 起点
  • L = 其他点
  • H = 和上一个点Y相等
  • V = 和上一个点X相等
  • Z = 关闭当前路径

<svg>

    <!--绘制路径直线-->
  <path d="M 100 100 L 200 100" stroke="red"></path>

    <!--绘制折线-->
    <path d="M 50 50 L 300 100 L 300 300" stroke="blue" fill="none"></path>

    <!-- 关闭路径-->
    <path d="M 70 70 L 210 200 L 210 70 Z" stroke="red" fill="none"></path>

    <!---->

    <path d="M 50 250 H 200 V 70 Z" stroke="blue" fill="none"></path>

</svg>

image.png

SVG绘制圆弧

A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置

• rx:圆弧X半径
• ry:圆弧Y半径
• xr:弧线所在的椭圆旋转的角度
• laf:是否选择弧长较长的一段 0是较短 1是较长
• sf:是否是顺时针 0是逆时针 1是顺时针
• x/y: 弧的终点位置

<svg width="500" height="500">

    
    <path d="M 100 100 A 100 50 0 1 0 200 150" stroke="red" fill="none"></path>

</svg>

image.png

SVG 贝塞尔曲线

Q(x1, y1, x, y) 从当前位置绘制二阶贝塞尔曲线到指定位置

• x1,y1: 控制点位置
• x,y: 终点位置

C = curveto

• C(x1, y1, x2, y2, x, y) 从当前位置绘制三阶贝塞尔曲线到指定位置
• x1, y1: 控制点1位置
• x2, y2: 控制点2位置
• x, y: 终点位置

<svg width="500" height="500">

    <!--二阶贝塞尔-->
    <path d="M 100 300 Q 150 50 300 300" stroke="red" stroke-width="5" fill="none"></path>

    <!--三界贝塞尔-->

    <path d="M100 140 C 100 50 250 150 260 100" stroke="red" stroke-width="5" fill="none"></path>
</svg>

image.png

SVG绘制文字

svg是以做下角作为参考,默认的文字的基线和指定的位置对齐

• text标签
  • x/y 指定绘制文字的开始位置
  • style:文字的样式
  • text-anchor: 指定文字水平方向对齐方式
  • dominant-baseline: 指定文字垂直方向对齐方式
  • dx/dy: 相对于前一个文字位置, 未设置位置的文字会继承前一个文字

<svg width="500" height="500">
    <line x1="250" y1="0" x2="250" y2="500" stroke="red" ></line>
    <line x1="0" y1="250" x2="500" y2="250" stroke="red" ></line>

    <text x="250" y="250" style="font-size: 40px;" text-anchor="start" dx="10 20">掠食龙</text>
    <!--
     text-anchor: 是以位置点 为参考
     start:文字开始的位置在 绘制点
     end：文字结束的位置在 绘制点
     middle:文字中的位置 在绘制点

    -->

</svg>

image.png

SVG绘制文字路径

• defs定义一个 不可见的 模块区域
• textPath 标签是 上面的文字 会根据defs里面定义的路径绘制

<svg width="500" height="500">
    <!--定义文本的绘制路径-->
    <defs>
        <path id="textPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>

    </defs>>
    <!--绘制文字-->
    <text>
        <!--文字路劲-->
        <textPath xlink:href="#textPath">这是一个绘制的文字按照路径绘制123</textPath>
    </text>



</svg>

image.png

SVG绘制超链接

<svg width="500" height="500" >
    <a xlink:href="http://www.baidu.com" xlink:title="官网" target="_blank">
        <!--文字-->
        <text x="100" y="100">百度爷爷</text>
        <!--图形-->
        <circle cx="200" cy="200" r="50" fill="red" ></circle>

    </a>
</svg>

SVG线性渐变

• linearGradient 线性渐变
  • x1/y1:渐变范围开始位置
  • x2/y2: 渐变范围结束位置
  • 默认情况下是按照当前元素的百分比
    不过可以通过 gradientUnits 修改
  • gradientUnits="objectBoundingBox" 默认
  • gradientUnits="userSpaceOnUse" 使用像素

<svg width="500" height="500">

    <!--百分比渐变-->
    <linearGradient id="myline" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
        <stop offset="0" stop-color="red"></stop>
        <stop offset="1" stop-color="green"></stop>
    </linearGradient>

    <!--访问-->
    <rect x="100" y="100" width="300" height="100" fill="url(#myline)"></rect>


    <!--像素渐变-->

    <linearGradient id="mypx" x1="200" y1="200" x2="400" y2="200" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="red"></stop>
        <stop offset="1" stop-color="green"></stop>
    </linearGradient>

    <!--绘制矩形-->
    <rect x="100" y="260" width="300" height="100" fill="url(#mypx)"></rect>



</svg>

image.png

SVG绘制图片

• xlink:href 访问图片的地址

<svg>
    <image xlink:href="images/1.gif"></image>
</svg>