SVG-基础

最新推荐文章于 2023-10-19 09:50:36 发布

小蚂蚁有力量

最新推荐文章于 2023-10-19 09:50:36 发布

阅读量672

点赞数

一、SVG概念

什么是SVG?
SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图
位图和矢量图
在计算机中有两种图形, 一种是位图, 一种是矢量图

2.1位图:
传统的 jpg / png / gif 图都是位图
位图是一个个很小的颜色小方块组合在一起的图片;一个小方块代表1px。

2.2位图的优点和缺点:
优点: 色彩丰富逼真
缺点: 放大后会失真, 体积大

2.3矢量图
矢量图是用XML格式定义, 通过各种「路径」和「填充颜色」来描述渲染的的图片

2.4矢量图优点和缺点:
优点: 放大后不会失真, 体积小
缺点: 不易制作色彩变化太多的图象

注意点

和canvas一样, svg也有默认的宽高, 并且默认的宽高和canvas都是一样的
默认的宽度是300px, 默认的高度是150px
和canvas不一样的是, svg可以通过css设置宽高, 也可以通过行内的属性来设置宽高

SVG常见的四种使用方式

1.内嵌到HTML中(直接在HTML中绘制)

2.通过浏览器直接打开SVG文件

注意点:
如果需要将svg保存到一个单独的文件中, 并且需要通过浏览器直接打开, 那么就必须给svg添加一个属性
xmlns=“http://www.w3.org/2000/svg”

3.在HTML的img标签中引用

4.作为CSS背景使用

二、SVG绘制矩形

x / y: 指定绘制的位置
width/height: 指定绘制的大小
fill: 修改填充的颜色
stroke: 修改描边的颜色
stroke-width: 修改描边的宽度
rx / ry: 设置圆角的半径

<head>
    <meta charset="UTF-8">
    <title>03-SVG绘制矩形</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        svg{
            display: block;
            margin: 0 auto;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<svg width="500" height="500">

<rect x="100" y="100" width="100" height="100" fill="blue"  rx="10" ry="10"></rect>

</svg>
</body>

三、SVG绘制圆和椭圆

cx/cy: 圆绘制的位置(圆心的位置)
r: 圆的半径

<circle cx="100" cy="100" r="50"></circle>

cx/cy: 椭圆绘制的位置(圆心的位置)
rx: 水平方向的半径
ry: 垂直方向的半径

<ellipse cx="100" cy="100" rx="100" ry="50"></ellipse>

四、SVG绘制直线和折线

绘制直线
x1 / y1: 设置起点
x2 / y2: 设置终点

<line x1="100" y1="100" x2="300" y2="100" stroke="#000"></line>

绘制折线
points: 设置所有的点, 两两一对

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

绘制多边形
polygon 和 polyline 差不多, 只不过会自动关闭路径

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

五、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中这些所有的常用属性都是可以直接在CSS中使用的;

<polyline points="100 100 300 100 300 300" stroke="red" stroke-width="10" fill="none" stroke-linejoin="round"></polyline>

六、SVG绘制路径

1.什么是SVG路径
SVG路径是一个比较牛X的东西, 可以绘制任意图形, 只不过比较复杂而已;
M = moveto 起点
L = lineto 其它点
H = horizontal lineto 和上一个点Y相等
V = vertical lineto 和上一个点X相等
Z = closepath 关闭当前路径

S = smooth curveto
S(x2, y2, x, y) 从当前位置光滑的绘制三次贝塞尔曲线到指定位置

T = smooth quadratic Bézier curveto
T(x, y) 从当前位置光滑的绘制二次贝塞尔曲线到指定位置

<path d="M 100 100 H 300 V 300 Z" stroke="red" fill="none" stroke-width="10"></path>

2.路径指令注意点：
大写字母是绝对定位, 小写字母是相对定位
绝对定位: 写什么位置就是什么位置
相对定位: 相对上一次的位置, 在上一次位置基础上做调整

<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 (radiux-x): 弧线X半径
ry (radiux-y): 弧线Y半径
xr (xAxis-rotation): 弧线所在椭圆旋转角度
laf(large-arc-flag): 是否选择弧长较长的那一段；// laf=1 ; 选择较长的那段
sf (sweep-flag): 是否顺时针绘制；// sf=1; 选择顺时针
x, y: 弧的终点位置

<path d="M 100 400 A 100 50 90 1 1 200 450" stroke="red" fill="none"></path>

八、SVG绘制贝塞尔曲线

Q = quadratic Bézier 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: 终点位置

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

<path d="M100 100 C 100 50 200 50 200 100" stroke="red" fill="none"></path>

九、SVG文本绘制

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

x / y: 指定绘制位置
style: 设置文字样式 (大小/字体等)
text-anchor: 指定文字水平方向对齐方式
dominant-baseline: 指定文字垂直方向对齐方式
dx / dy: 相对于前一个文字位置, 未设置位置的文字会继承前一个文字

<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" text-anchor="middle">知播渔教育</text>

<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" dominant-baseline="text-before-edge">知播渔教育</text>

<text x="250" y="250" style="font-size: 40px;" fill="none" stroke="red" dx="10 20 30">知播渔教育</text>

<text fill="yellow">
       
   <tspan x="100" y="100">知知知知</tspan>
   <tspan x="100" y="150">播播播播</tspan>
   <tspan x="100" y="200">渔渔渔渔</tspan>
 </text>

十、SVG绘制路径文本

总结:
1.定义一个路径
2.告诉文本需要按照哪个路径来绘制

注意点:
如果是绘制路径文本, 那么超出路径范围的内容不会被绘制出来

<defs>
    <!--用defs标签包裹起来，这条路经就不会显示-->
    <path id="myPath" d="M 100 100 Q 150 50 200 100" stroke="red" fill="none"></path>
    
</defs>
    
<text>
    <textPath xlink:href="#myPath">知播渔教育(http://www.it666.com)</textPath>
</text>

十一、SVG绘制超链接

可以给任意内容添加超链接, 只需要用超链接包裹起来即可
xlink:href: 指定链接地址
xlink:title: 指定链接提示
target: 指定打开方式

<a xlink:href="http://www.it666.com" xlink:title="官网" target="_blank">
     <!--<text x="100" y="100">知播渔</text>-->
     <circle cx="100" cy="100" r="100" fill="red"></circle>
 </a>

十二、SVG绘制图片

注意点:
默认情况下我们的指定的图片多大就绘制多大

注意点: 当设置的尺寸和图片实际尺寸不一样时
高度填满, 宽度等比拉伸

 <!--<image xlink:href="images/lnj.jpg" width="300" height="300"></image>-->
 
 <image xlink:href="images/lnj.jpg" x="100" y="100"></image>

十三、SVG结构元素

1.g结构元素
g 是group的缩写, 可以将多个元素放到一个g标记中, 这样就组成了一个组,
以便统一操作，比如旋转，缩放或者添加相关样式等
对g标记设置的所有样式都会应用到这一组所有的元素中

2.use
g 结构元素封装的图形还可以通过<use>元素进行复制使用
<use xlink:href=""/>

3.defs
g 封装的元素默认是可见的, 如果仅仅是需要定义一组模板, 将来需要用到时候才显示, 那么就可以使用 defs

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

 <symbol>
        <g id="myGroup">
            <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>
 </symbol>
 
 <use xlink:href="#myGroup" x="0" fill="blue"></use>
 <use xlink:href="#myGroup" x="300" fill="red"></use>

十四、SVG裁剪和蒙版

clipPath
只有路径范围内的内容会被显示, 路径范围外的内容不会被显示；
mask
mask和clipPath差不多
2.1.裁切路径是可见与不可见的突变
2.2.蒙版则是可见与不可见的渐变
注意点：在指定裁剪和蒙版的时候需要通过 url(#id) 来指定；

<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>


<mask id="myMask">
    <circle cx="200" cy="200" r="100" fill="rgba(255, 0, 0, 0.5)"></circle>
</mask>

<rect x="100" y="100" width="300" height="200" fill="blue" mask="url(#myMask)"></rect>

十五、SVG渐变

1.线性渐变和径向渐变
和Canvas一样, 在SVG中也可以生成渐变颜色

<linearGradient></linearGradient> 线性渐变
<radialGradient></radialGradient> 径向渐变

2.渐变属性
x1/y1: 渐变范围开始位置
x2/y2: 渐变范围结束位置
默认情况下x1 /y1 /x2 /y2是当前元素的百分比，可以通过gradientUnits修改；
gradientUnits = “objectBoundingBox”
gradientUnits = “userSpaceOnUse”

3.注意点: 使用渐变颜色需要通过 url(#id) 格式来使用

 <defs>    
   <!--<linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1">-->
   <!--<linearGradient id="myColor" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">-->
   
   <linearGradient id="myColor" x1="100" y1="100" x2="400" y2="100" gradientUnits="userSpaceOnUse">
        <!--从0%开始为红色-->
        <stop offset="0" stop-color="red"></stop>
            
        <!--到100%为蓝色-->
        <stop offset="1" stop-color="blue"></stop>     
        
   </linearGradient>
        
 </defs>
    
<rect x="100" y="100" width="300" height="200" fill="url(#myColor)"></rect>

十六、SVG画笔

1.Pattern(画笔)
在SVG中除了可以使用纯色和渐变色作为填充色以外, 还可以使用自定义图形作为填充；

2.Pattern属性
width / height 默认情况下也是百分比
可以通过gradientUnits修改
patternUnits = “objectBoundingBox”
patternUnits = “userSpaceOnUse”

<defs>
    <!--<pattern id="myPattern" width="0.2" height="0.2">-->
    <!--<pattern id="myPattern" width="0.2" height="0.2" patternUnits="objectBoundingBox">-->
    
    <pattern id="myPattern" width="20" height="20" patternUnits="userSpaceOnUse">
         <circle cx="10" cy="10" r="10" fill="red"></circle>
    </pattern>
    
</defs>

 <!--<circle cx="10" cy="10" r="10" fill="red"></circle>-->
 <rect x="100" y="100" width="300" height="200" fill="url(#myPattern)"></rect>

十七、SVG形变

<!--简单的理解: 一句话和Canvas一样, 改变的是坐标系-->
<rect x="100" y="250" width="300" height="200" fill="blue" transform="rotate(15)"></rect>

<!--旋转：transform="rotate(-30,50,550 )，第一个数为旋转角度，后面两个数为旋转参考坐标"-->
<rect x="50" y="550" width="300" height="200" fill="blue''  transform="rotate(-45,50,550 )"></rect>

十八、SVG-ViewBox

1.什么是ViewBox?
ViewBox 就是可视区域, 用户能看到的区域；默认情况下，可视区域的大小和内容区域大小是一致的；但是我们也可以手动修改可视区域的大小。

2.ViewBox属性格式
viewBox = “x y width height”
x: 修改可视区域x方向位置
y: 修改可视区域y方向位置
width / height: 修改可视区域尺寸, 近大远小

<svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="50" fill="red"></circle>
</svg>

3.默认情况下如果 viewBox 的尺寸是等比缩放的, 那么调整后 viewBox 区域的 xy 和内容区域的 xy 对齐；但是如果 viewBox 的尺寸不是等比缩放的, 那么系统就会调整viewBox的位置, 我们设置的 x / y 会失效, 此时如果需要 viewBox 的xy和内容区域 (viewProt) 的 xy 继续保持重合, 那么就需要使用preserveAspectRatio 属性来设置对齐方式；

preserveAspectRatio 第一个参数：
xMin viewport 和 viewBox左边对齐
xMid viewport 和 viewBox x轴中心对齐
xMax viewport 和 viewBox右边对齐
YMin viewport 和 viewBox上边缘对齐。注意Y是大写。
YMid viewport 和 viewBox y轴中心点对齐。注意Y是大写。
YMax viewport 和 viewBox下边缘对齐。注意Y是大写。

preserveAspectRatio 第二个参数：
meet 保持纵横比缩放viewBox适应viewport，受
slice 保持纵横比同时比例小的方向放大填满viewport，攻
none 扭曲纵横比以充分适应viewport，变态

<svg width="200" height="200" viewBox="0 0 150 50" preserveAspectRatio="xMinYMin">
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

十九、SVG动画

在SVG中提供了三种常用动画标记：

  <animate> 基础动画
  <animateTransform> 形变动画
  <animateMotion> 路径动画

SVG动画使用方式
2.1创建动画, 告诉动画标记哪个元素需要执行动画
2.2创建元素, 在元素中说明需要执行什么动画
SVG动画属性
attributeType: CSS / XML 规定的属性值的名称空间
attributeName: 规定元素的哪个属性会产生动画效果
from/to: 从哪到哪
dur: 动画时长
fill: 动画结束之后的状态保持结束状态 freeze / remove 恢复初始状态

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

<circle cx="100" cy="100" r="50" fill="blue">
            <animate
                    attributeName="r"
                    from="50"
                    to="100"
                    dur="5s"
                    fill="freeze"
            ></animate>
</circle>
</svg>

SVG常用动画属性
repeatCount: 规定动画重复的次数。
repeatDur: 规定动画重复总时长
begin: 规定动画开始的时间
begin=“1s”
begin=“click”
begin=“click + 1s”
restart: 规定元素开始动画之后，是否可以被重新开始执行
always：动画可以在任何时候被重置。这是默认值。
whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后。
never：在整个SVG执行的过程中，元素动画不能被重置。
calcMode: 规定每一个动画片段的动画表现
linear：默认属性值, 匀速动画
discrete: 非连续动画, 没有动画效果瞬间完成
paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
spline: 配合keySplines属性来定义各个动画过渡效, 自定义动画
keyTimes: 划分动画时间片段, 取值0-1
values: 划分对应取值片段的值

更多: www.w3.org/TR/SVG/animate.html


<svg width="500" height="500">
     <circle cx="100" cy="100" r="50" fill="blue">
            <animate
                    attributeName="r"
                    from="50"
                    to="100"
                    dur="2s"
                    fill="freeze"
                    begin="click"
                    calcMode="linear"
                    keyTimes="0;0.5;1"
                    values="20;50;100"
            ></animate>
      </circle>
</svg>

SVG混合动画

<svg width="500" height="500">
        <circle cx="100" cy="100" r="50" fill="blue">

           <animate
                    id="toRight"
                    attributeName="cx"
                    from="100"
                    to="300"
                    dur="2s"
                    begin="0;toLeft.end"
                    fill="freeze"
            ></animate>
            
            <animate
                    id="toLeft"
                    attributeName="cx"
                    from="300"
                    to="100"
                    dur="2s"
                    begin="toRight.end + 2s"
                    fill="freeze"
            ></animate>
            
        </circle>
 </svg>

SVG形变动画

<svg width="500" height="500">
    <rect x="100" y="100" width="300" height="200" fill="blue">
        <animateTransform
                attributeName="transform"
                type="scale"
                from="1 1"
                to="0.5 1"
                dur="2s"
                begin="click"
                fill="freeze"
        ></animateTransform>
    </rect>
</svg>

SVG路径动画

<svg width="500" height="500" viewBox="-100 -100 500 500">

    <path d="M0 0 C0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
    
    <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,0.5)">
        <animateMotion
            path="M0 0 C0 300 300 300 300 0"
            dur="5s"
            begin="click"
            fill="freeze"
            rotate="auto"
        ></animateMotion>
    </rect>
    
</svg>

二十、SVG脚本编程

1.SVG脚本编程注意点:
创建SVG时必须指定命名空间
const SVG_NS = http://www.w3.org/2000/svg

2.SVG脚本编程注意点:
使用xlink属性也必须指定命名空间
const XLINK_NS = “http://www.w3.org/1999/xlink”;

3.脚本编程推荐自学svg框架
https://svgjs.com/
http://snapsvg.io/docs/

<script>

const SVG_NS = "http://www.w3.org/2000/svg"
    // let oSvg = document.createElement("svg");
    let oSvg = document.createElementNS(SVG_NS,"svg");
    oSvg.setAttribute("width", "500");
    oSvg.setAttribute("height", "500");
    document.body.appendChild(oSvg);

    // let oCircle = document.createElement("circle");
    let oCircle = document.createElementNS(SVG_NS,"circle");
    oCircle.setAttribute("cx", "100");
    oCircle.setAttribute("cy", "100");
    oCircle.setAttribute("r", "50");
    oCircle.setAttribute("fill", "red");
    oSvg.appendChild(oCircle);

    const XLINK_NS = "http://www.w3.org/1999/xlink";
    let oImage = document.createElementNS(SVG_NS, "image");
    oImage.setAttribute("x", "200");
    oImage.setAttribute("y", "200");
    // oImage.setAttribute("xlink:href", "images/lnj.jpg");
    oImage.setAttributeNS(XLINK_NS,"xlink:href", "images/lnj.jpg");
    oSvg.appendChild(oImage);
    
</script>

-End

小蚂蚁有力量

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG-基础

一、SVG概念什么是SVG?SVG英文全称为Scalable Vector Graphics，意思为可缩放的矢量图位图和矢量图在计算机中有两种图形, 一种是位图, 一种是矢量图2.1位图:传统的 jpg / png / gif图都是位图位图是一个个很小的颜色小方块组合在一起的图片。一个小方块代表1px2.2位图的优点和缺点:优点: 色彩丰富逼真缺点: 放大后会失真, 体...
复制链接

扫一扫