SVG图形

最新推荐文章于 2024-08-03 13:05:28 发布

_忆拾

最新推荐文章于 2024-08-03 13:05:28 发布

阅读量281

点赞数 4

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_57332596/article/details/125824482

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

SVG简介

svg是可缩放的矢量图,<svg>元素是SVG图形的容器，SVG用于定义网络的基于矢量的图形，SVG使用XML格式定义图形，SVG图像在放大或改变尺寸的情况下图片质量不会损失,SVG是万维网联盟的标准

SVG相比于其他图片的优势

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

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

SVG是可伸缩的

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

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

canvas和SVG的比较

Canvas	SVG
以来分辨率不支持事件处理器弱的文本渲染能力能够以.png或.jpg格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）不适合游戏应用

SVG形状绘制

rect矩形

<svg width="100%" height="800">
    <rect x="100" y="100" width="200" height="100" fill="blue"stroke="red" stroke-width="3" rx="20" ry="50" />
</svg>

主要属性：

x,y：开始位置；

width,height：矩形宽高；

fill：填充颜色、默认为黑色；

stroke：描边的颜色；

stoke-width：描边的宽度；

rx，ry：圆角；

circle圆形

<circle cx="200" cy="200" r="50" fill="blue" stroke="red" stroke-width="5" fill-opacity=".7" stroke-opacity=".7" />

主要属性：

cx，cy：交叉点为圆心；

r：半径；

fill-opacity：填充透明度；

stroke-opacity：边框透明度

椭圆形

大部分属性与圆形相同，椭圆有rx和ry两个半径

<ellipse cx="200" cy="200" rx="50" ry="30" fill="blue" />

折线

<polyline points="100 100 100 200 200 200" stroke="red" fill="none" />

主要属性：

points:两个值为一个坐标组（如 x y x y x y）

直线

<line x1="100" y1="100" x2="200" y2="100" stroke="red" stroke-width="2" />

主要属性：

x1,y1：开始坐标

x2,y2：结束坐标

SVG动画

动画样式分为三种，基础动画、形变动画、路径动画

<animate></animate> 基础动画

<animateTransform></animateTransform> 形变动画

<animateMotion></animateMotion>路径动画

创建基础动画

创建动画的方式分为两种标签内创建和id绑定创建

标签内创建是在形状标签中写动画

<circle cx="200" cy="200" r="50" fill="blue" stroke="red" stroke-width="3">
    <animate attributeType="XML" attributeName="" from="" to="" dur="" repeatCount="" />
</circle>

当动画标签在标签外部创建时需要给形状标签添加id，给动画标签添加xlink:href="id"属性进行绑定

<svg width="100%" height="500">
    <circle id="move" cx="200" cy="200" r="50" fill="blue" stroke="red" stroke-width="3">
    </circle>
    <animate attributeType="XML" attributeName="cx" from="200" to="500" dur="2s" xlink:href="#move" />
</svg>

创建形变动画

<svg width="100%" height="500">
    <rect id="move" x="200" y="200" width="100" height="200" fill="blue" stroke="red" stroke-width="3">
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" xlink:href="#move" from="30 200 200" to="360 200 200" dur="3s" />
    </rect>
</svg>

创建路径动画

<svg width="100%" height="500">
    <path d="M200 200 C200 200 400 500 600 200" fill="none" stroke="red" stroke-width="2" />
    <circle id="move" cx="200" cy="200" r="50" fill="blue" stroke="red" stroke-width="3">
        <animateMotion path="M0 0 C0 0 200 300 400 0" begin="click" dur="3">
        </animateMotion>
    </circle>
</svg>

动画常用属性

attributeType css/xml规定的属性值的名称空间

attrbuteName 规定元素的哪个属性会产生动画效果

from/to 从哪个坐标移动到哪个坐标

begin=3 从第几秒开始也可以写click鼠标单击或当某个动画结束时id.end

dur=5 动画时长秒为单位

repeatCount="indefinite" 写次数或indefinite循环

fill 动画结束后的状态，保持freeze结束状态/remove回复初始状态

animate中的fill和形状绘制标签中的fill意思不同注意分清！！！

xlink:href="id" 当为外部动画时可链接id名添加动画

type=translate/rotate/scale 偏移/旋转/放大缩小

当属性为rotate时 from="角度 x轴交叉中心点 y轴" to="角度 x轴 y轴"

values="num;num;num" 可放多个值

path标签

Path设置路径时每个字母代表的含义： M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto 弯曲 S = smooth curveto 平滑曲线 Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc 椭圆弧 Z = closepath 闭合路径