SVG绘制2

2020-01-31 本文已影响0人 David_Rao

路径

什么是SVG路径
M = moveto 起点
L = lineto 其它点
H = horizontal lineto 和上一个点Y相等
V = vertical lineto 和上一个点X相等
Z = closepath 关闭当前路径
路径指令注意点
大写字母是绝对定位，小写字母是相对定位
绝对定位：写什么位置就是什么位置
相对定位：相对上一次的位置，在上一次位置基础上做调整

<svg width="500" height="500">
    <!--<path d="M 100 100 L 300 100 L 300 300" stroke="red" fill="none" stroke-width="10"></path>-->
    <!--<path d="M 100 100 L 300 100 L 300 300 Z" stroke="red" fill="none" stroke-width="10"></path>-->
    <!--<path d="M 100 100 H 300 V 300 Z" stroke="red" fill="none" stroke-width="10"></path>-->
    <path d="M 100 100 l 300 100" stroke="red" stroke-width="10"></path>
</svg>

绘制圆弧

A = elliptical Arc
A(rx, ry, xr, laf, sf, x, y) 从当前位置绘制弧线到指定位置
rx(radius-x): 弧线X半径
ry(radius-y): 弧线Y半径
xr(xAxis-rotation): 弧线所在椭圆旋转角度
laf(large-arc-flag): 是否选择弧长较长的那一段
sf(sweep-flag): 是否顺时针绘制
x, y: 弧的终点位置

<svg width="500" height="500">
    <path d="M 100 100 A 100 50 0 0 0 200 150" stroke="red" fill="none"></path>
</svg>

起点(100, 100)，终点(200, 150)，rx=100，ry=50，不旋转，较短，逆时针

贝塞尔曲线

Q = quadratic Bezier curve
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 100 Q 150 50 200 100" stroke="red" fill="none"></path>
    <path d="M 100 200 C 100 150 200 150 200 200" stroke="red" fill="none"></path>
</svg>

SVG绘制文本

和canvas一样，是以左下角为参考
和canvas一样，默认是文字的基线和指定的位置对齐

x/y: 起始点，与对齐方式有关
style="font-size: 40px" 设置字体大小
fill 字体填充颜色
stroke 字体描边颜色
text-anchor 水平对齐方式 start/end/middle
dominant-baseline 垂直对齐方式 after-edge/before-edge/middle
dx 当前文字距离上一文字的间隙
dy 当前文字在垂直方向上的偏移
多行文字

<text fill="red">//可以统一设置
    <tspan x="100" y="100">hello</tspan>
    <tspan x="100" y="150">world</tspan>
</text>

绘制路径文本

定义一个路径
告诉文本需要按照哪个路径来绘制
注意点：如果是绘制路径文本，那么超出路径范围的内容不会被绘制出来

<svg width="500" height="500">
    <!--定义一个路径-->
    <defs>
        <path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>
    </defs>
    <!--xlink:href给文本指定路径-->
    <text>
        <textPath xlink:href="#myPath">David Rao</textPath>
    </text>
</svg>

SVG绘制超链接

可以给任意内容添加超链接，只需要用超链接包裹即可

xlink:href: 指定链接地址
xlink:title: 指定链接显示
target: 指定打开方式

<svg width="500" height="500">
    <a xlink:href="http://www.baidu.com" xlink:title="百度" target="_blank">

        <circle cx="50" cy="50" r="50" fill="red"></circle>
        <text x="100" y="100">David Rao</text>
    </a>
</svg>

SVG绘制图片

默认情况下我们的指定的图片多大就绘制多大
当设置的尺寸和图片实际尺寸不一样时，高度填满，宽度等比拉伸
width/height 宽高
x/y 位置

<svg width="500" height="500">
    <image xlink:href="alien.png" width="300" height="300" x="100" y="100"></image>
</svg>

SVG结构标签

g结构元素
g是group的缩写，可以将多个元素放到一个g标记中，这样就组成了一个组，以便统一操作，比如旋转，缩放或者添加相关样式等
use
g结构元素封装的图形还可以通过<use>元素进行复制使用<use xlink:href="">
defs
g封装的元素默认是可见的，如果仅仅是需要定义一组模板，将来需要用的时候才显示，可以使用哦个defs
symbol

symbol兼具<g>的分组功能和<defs>初始不可见的特性
symbol能够创建自己的视窗，所以能够应用viewBox和preserveAspectRatio属性

<svg width="500" height="500">
    <defs>
        <g id="myGroup" fill="red">
            <circle cx="100" cy="100" r="100"></circle>
            <circle cx="100" cy="200" r="50"></circle>
            <circle cx="100" cy="300" r="30"></circle>
        </g>
    </defs>
    <use xlink:href="#myGroup" x="300"></use>
</svg>

SVG裁剪和蒙版

clipPath
只有路径范围内的内容会被显示，路径范围外的内容不会被显示
mask
mask和clipPath差不多
2.1 裁剪路径是可见于不可见的突变
2.2 蒙版则是可见与不可见的渐变

裁剪clip-path="url(#id)"
蒙版mask="url(#id)"

// 裁剪
<svg width="500" height="500">
    <clipPath id="myClip">
        <circle cx="200" cy="200" r="100" fill="red"></circle>
    </clipPath>
    <rect x="100" y="100" width="300" height="200" fill="blue" clip-path="url(#myClip)"></rect>
</svg>
// 蒙版
<svg width="500" height="500">
    <mask id="myMask">
        <circle cx="200" cy="200" r="100" fill="red"></circle>
    </mask>
    <rect x="100" y="100" width="300" height="200" fill="blue" mask="url(#myMask)"></rect>
</svg>

SVG渐变色

线性渐变和径向渐变
和canvas一样，在SVG中也可以生成渐变颜色
<linearGradient></linearGradient> 线性渐变
<radialGradient></radialGradient> 径向渐变
渐变属性
x1/y1: 渐变范围开始位置
x2/y2: 渐变范围结束位置
fill="url(#id)"
注意点
默认情况下x1/y1/x2/y2是当前元素的百分比
可以通过gradientUnits修改

gradientUnits = "objectBoundingBox" // 百分比
gradientUnits = "userSpaceOnUse" // 像素

使用渐变颜色需要通过url(#id)格式来使用

<svg width="500" height="500">
    <defs>
        <linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0" stop-color="red"></stop>
            <stop offset="1" stop-color="blue"></stop>
        </linearGradient>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myColor)"></rect>
</svg>

SVG画笔

Pattern（画笔）
在SVG中除了可hi使用纯色和渐变色作为填充色外，还可以使用自定义图形作为填充
Pattern属性
width/height默认情况下也是百分比
可以通过gradientUnits修改

gradientUnits = "objectBoundingBox" // 百分比
gradientUnits = "userSpaceOnUse" // 像素

使用画笔需要通过url(#id)格式来使用

<svg width="500" height="500">
    <defs>
        <pattern id="myPattern" width="0.2" height="0.2" gradientUnits = "objectBoundingBox">
            <circle cx="10" cy="10" r="10" fill="red"></circle>
        </pattern>
    </defs>
    <rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>
</svg>

SVG形变

和canvas一样，改变的是坐标系

transform="translate(100, 0)" 平移
transform="scale(0.5, 1)" 缩放
transform="rotate(15)" 旋转

<svg width="500" height="500">
    <rect x="100" y="100" width="200" height="100" fill="blue" transform="rotate(15) translate(50, 0) scale(1.5, 1.5)"></rect>
</svg>