<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>doc</title>
<style>
#line{
animation: lineScroll 2s linear infinite;
}
@keyframes lineScroll{
0%{
stroke-dashoffset: 300;
}
100%{
stroke-dashoffset: 0;
}
}
#circle{
transition: all 2s;
stroke-dasharray:314,314;
stroke-dashoffset:314;
}
svg:hover #circle{
stroke-dashoffset:0;
}
#rect {
stroke-width: 6px;
fill: #fff;
stroke: red;
stroke-dasharray: 20;
animation: path-animation 5s linear infinite;
}
@keyframes path-animation {
from {
stroke-dashoffset: 100%;
}
to {
stroke-dashoffset: 0%;
}
}
.star-path {
fill:none;
stroke-width:10;
stroke: #d3dce6;
stroke-linejoin:round;
stroke-linecap:round;
}
.star-fill {
fill:none;
stroke-width:10;
stroke: #ff7700;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dasharray:1340;
stroke-dashoffset:0;
animation: starFill 2s ease-out infinite;
}
@keyframes starFill {
0% {
stroke-dashoffset:1340;
}
100% {
stroke-dashoffset:0;
}
}
</style>
</head>
<body>
<h1>svg</h1>
<!-- 直线滚出 -->
<svg >
<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/>
</svg>
<!-- 圆形路径滚出 -->
<svg width="200" height="200" viewBox="0 0 200 200">
<circle id="circle" cx="100" cy="80" r="50" fill="gray" stroke-width="5" stroke="green" />
</svg>
<!-- 矩形虚线框边框滚动动画 -->
<svg height="100" width="300">
<rect id="rect" height="100" width="300" />
</svg>
<!-- 竖直轨迹文字动画 -->
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">人
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="5s" rotate="0" repeatCount="indefinite"/>
</text>
<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
<!-- 五角星全绘 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="-500 -500 2500 2500">
<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-path"></polygon>
<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-fill"></polygon>
</svg>
<!-- 横向文字循环滚动 -->
<svg width="100%" height="250" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei,sans-serif" font-size="15" y="50" x="200" fill="#5F9F9F">内容2
<animate attributeName="x" from="100%" to="-200" begin="0.5s" dur="10s" repeatCount="indefinite"></animate>
</text>
</g>
</svg>
<!-- 小球折线运动 -->
<svg width="500" height="500">
<path d="M100 150 L200 50 L300 150 L400 50 Z" stroke="#ccc" stroke-width="2" fill="none" />
<circle r="20" x="150" y="0" style="fill:#336622;">
<animateMotion dur="3s" repeatCount="indefinite" rotate="auto" path="M100 150 L200 50 L300 150 L400 50 Z" />
</circle>
</svg>
<!-- 小球曲线闭合运动 -->
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Draw the outline of the motion path in grey, along
with 2 small circles at key points -->
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath" />
<circle cx="10" cy="110" r="3" fill="lightgrey" />
<circle cx="110" cy="10" r="3" fill="lightgrey" />
<!-- Red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath" />
</animateMotion>
</circle>
</svg>
<!-- 图片曲线运动 -->
<svg width="500" height="350" viewBox="0 0 500 350">
<!--运动的路径轨迹-->
<path style="fill:none;" stroke="#000" id="motionPath" d="M0.038,0c0,0-2.25,26.75,27.75,42.25c11.501,5.942,36.167,25.667,42.5,29.583
c5.465,3.38,37.333,22.667-11.125,55.917" />
<!--运动的图片-->
<image id="car" transform="translate(-72,-72)" style="overflow:visible;" width="144px" height="144px" xlink:href="images/light.png">
<animate attributeName="opacity" values="0;1;1;1;1;0" dur="3s" repeatCount="indefinite" />
</image>
<!--运动的相关参数 1、href链接到图片 mpath链接到路径-->
<animateMotion xlink:href="#car" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
</body>
</html>
