svg学习

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

疯喵喵

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

阅读量251

点赞数

分类专栏： js svg

本文链接：https://blog.csdn.net/fgg9655/article/details/116998119

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

svg

1 篇文章 0 订阅

订阅专栏

svg和canvas区别

svg支持事件处理器
svg矢量的,canvas依赖分辨率,能够以 .png 和 .jpg格式保存存储图像
svg每个图形都是单独的,可单独操作. canvas每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示(适合需要密集型重绘的)

svg 描边动画

路径可用svg编辑器画 Inkscape
采用stroke-dasharray与stroke-dashoffset配合,结合animation改变stroke-dashoffset实现
stroke-dasharray 绘制虚线
(一个参数 stroke-dasharray=‘10’:‘虚线长度和间距都是10’)
(两个参数 stroke-dasharray=‘10,5’:‘虚线长10，间距5, 重复’)
(两个参数 stroke-dasharray=‘10,5,20’:‘虚线长10，间距5,虚线长20, 重复’)
stroke-dashoffset 虚线偏移值

当dasharray一段的虚线足够长则就是一个图形长度,当偏移值dashoffset和这个长度一样时候则图像就看不到了,于是用结合animation改变dashoffset为0则能实现描线效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>text svg</title>
	<style type="text/css">
		body {
			background-color: #212A3F;
		}
		#svg-canvas {
			width: 400px;
			height: 400px;
		}
		.title {
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			animation: draw 3s linear forwards;		
			-webkit-animation: draw 3s linear forwards;
			-moz-animation: draw 3s linear forwards;
			-o-animation: draw 3s linear forwards;
		}
		@keyframes draw {
		to {
			stroke-dashoffset: 0;
			}
		}

	</style>
</head>
<body>
		<svg id="svg-canvas">
			<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
			d="m 110.36905,43.089284 c 0,0 -21.166669,55.184524 -37.797623,39.309524 -16.630952,-15.875 68.035713,55.184522 15.119048,55.184522 -52.916666,0 84.666665,53.67262 21.166665,58.96429 -63.499998,5.29166 52.91667,51.40476 52.91667,51.40476 L 184.45238,95.249999 c 0,0 -24.94643,23.434521 -43.84524,-18.898809 C 121.70833,34.017857 110.36905,43.089284 110.36905,43.089284 Z"/>
		</svg>
</body>
</html>

svg 路径动画

通过<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />可使被包裹的父svg沿着该path路径运动

path: 运动路径
dur: 一次动画持续时间
repeatCount: 重复次数 indefinite 无限次
fill: 当fill="freeze"时，动画终止时，发生变化的元素属性值停留在动画终止时的状态；当fill="remove"时，动画终止时，发生变化的元素属性值回复到动画起始时的状态。fill属性默认值为remove。
begin : 定义动画开始时间 ; click: 点击后开始动画

如图让上面的svg图形点击后沿着自己路径运动:

    <svg id="svg-canvas">
			<path fill-opacity="0" stroke="#FFF" stroke-width="1.5"
			d="m 110.36905,43.089284 c 0,0 -21.166669,55.184524 -37.797623,39.309524 -16.630952,-15.875 68.035713,55.184522 15.119048,55.184522 -52.916666,0 84.666665,53.67262 21.166665,58.96429 -63.499998,5.29166 52.91667,51.40476 52.91667,51.40476 L 184.45238,95.249999 c 0,0 -24.94643,23.434521 -43.84524,-18.898809 C 121.70833,34.017857 110.36905,43.089284 110.36905,43.089284 Z">
				<animateMotion path="m 110.36905,43.089284 c 0,0 -21.166669,55.184524 -37.797623,39.309524 -16.630952,-15.875 68.035713,55.184522 15.119048,55.184522 -52.916666,0 84.666665,53.67262 21.166665,58.96429 -63.499998,5.29166 52.91667,51.40476 52.91667,51.40476 L 184.45238,95.249999 c 0,0 -24.94643,23.434521 -43.84524,-18.898809 C 121.70833,34.017857 110.36905,43.089284 110.36905,43.089284 Z"  dur="5s" repeatCount="1" begin="click"
				fill="freeze"/>
			</path>
    </svg>

    <!-- 用图片去按照路径运动 -->

    <!-- <image id="star" x="135" y="-18" xlink:href="images/star.png" width="420" height="420">
        <animateMotion fill="freeze" dur="3s" begin="click" repeatCount="1" path="m0,0 124,0 c0,0 40,0 40,-40m0,0 0,-264c0,0 -0,-21 -28,-20m0,0 -270,0c0,0 -26,0 -26,29m0,0 0,217c0,0 0,22 30,22m0,0 115,0c0,0 18,0 18,-18m0,0 0,-10"/>
    </image> -->

疯喵喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg学习

svg和canvas区别svg支持事件处理器svg矢量的,canvas依赖分辨率,能够以 .png 和 .jpg格式保存存储图像svg每个图形都是单独的,可单独操作. canvas每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示(适合需要密集型重绘的)svg 描边动画路径可用svg编辑器画 Inkscape采用stroke-dasharray与stroke-dashoffset配合,结合animation改变stroke-dashoffset实现str
复制链接

扫一扫