forked from Yuezi32/weixin_svg_demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (77 loc) · 9.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信正文页SVG交互Demo</title>
</head>
<body>
<!-- 以下为嵌入微信编辑器的SVG代码 -->
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g>
<animate attributeName="opacity" begin="0s" dur="1s" values="1;0;1" repeatCount="indefinite"></animate>
<text x="200" y="540" fill="#fff" style="font-size: 30px">点击爆竹放飞梦想</text>
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="never"></animateTransform>
<g style="transform: translate(140px, 580px);">
<path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741" />
<path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737" />
<path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
<path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741" />
<path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b" />
<path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65" />
<path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450" />
</g>
<g style="transform: translate(120px, 560px);opacity: 0">
<animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
<rect width="92" height="229" rx="12" ry="12" fill="#fc4d50" />
<path d="M37.17,20.93l-2.58,5.16h-7L32,16.29h7.22L38.54,18H66.9v2.92H52.63v6.88H66.38V30.9H52.63V43.27H67.42V46.2H52.63V56h-7V46.2h-18V43.27h3.27V27.81H45.59V20.93Zm8.42,22.34V30.9H37.34V43.27Z" transform="translate(-0.5 -0.5)" fill="#fff" />
<path d="M34.42,75.62v-1.2h-7V71.15h7V69.43l7.22-.86v2.58H53.32V69.43l6.88-.86v2.58h7.22v3.27H60.2v1.2H53.32v-1.2H41.63v1.2H40.26V78h7.56v3.09H28.06V78h6.87l5-2.41Zm-7,14.09V86.62h11L39.92,82h6.36l-1.55,4.64h3.61v3.09Zm7.39,6.36-1.55,12.72H28.06L29.6,96.07Zm-.69,12.72,1.55-4.47V94.7H28.4V91.78h7.22v-.69l6.88-1.2v1.89h5V94.7h-5v14.09ZM35.45,82l1.2,3.78H30.29L29.09,82Zm12.89,26.81h-4l-1.2-12.72h4ZM67.42,84.9v2.92H65v21H58.82v-21H55.73l-.69,21H49l1-31.8,16.5-.69v2.92l-10.48.52L55.9,84.9Z" transform="translate(-0.5 -0.5)" fill="#fff" />
<path d="M27.37,125.84v-3.27h40v3.27Zm2.06,36.09V129.28H44.21l6.53-2.58v2.58H65.53v32.66Zm8.08-29.22V142H57.28v-9.28Zm0,25.44H57.28V145.44H37.51Z" transform="translate(-0.5 -0.5)" fill="#fff" />
<path d="M27.37,178.47v-2.92H67.24v2.92H41.81l-1,6.36H65.35v29.39h-9.8l1.72-5V187.75h-17l-4.81,26.47H27.37l6.36-35.75Z" transform="translate(-0.5 -0.5)" fill="#fff" />
</g>
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="whenNotActive"></animateTransform>
<g style="transform: translate(300px, 580px);">
<path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741"></path>
<path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737"></path>
<path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b"></path>
<path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741"></path>
<path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b"></path>
<path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65"></path>
<path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450"></path>
</g>
<g style="transform: translate(280px, 560px);opacity: 0;">
<animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze"></animate>
<rect width="92" height="229" rx="12" ry="12" fill="#fc4d50"></rect>
<path d="M64.84,18.52v18h2.92v3.09H64.84v17H55.9l1.72-5.16V39.66H44.56l-8.94,17H27.71l8.77-17H27.71V36.57h3.09v-18Zm-7.22,6V21.45H37.85v3.09Zm0,6V27.46H37.85v3.09Zm0,6V33.48H37.85v3.09ZM44,17.84l7-3.09v3.09Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
<path d="M27,87.65l6.19-18.73H40.6l-3.27,9.63v30.08h-6.7v-21ZM43.18,77.34H49l-3.61,31.28H39.57Zm23.89-4.12v3.27H56.76v21h2.41v3.09H56.76v8.08H50.23v-8.08H47.48V97.45h2.75v-21H40.09V73.21H50.23V69.6l6.53-1v4.64Zm-3.44,4.13,3.44,31.28H61.23L57.79,77.34Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
<path d="M31.32,161.59v-21H28.06l5.84-18.73h7.22l-2.75,8.77v30.94Zm8.77,0L42.49,143H40.26l2.23-15.81H40.43v-2.75h8.42l-2.06,14.78H49l-2.41,19.42H68.1v2.92Zm20.63-23v3.78h6.53v2.75H60.71v3.78h6.53v2.75H60.71v5.67H54.18v-5.67H49.71v-2.75h4.47v-3.78H49.71v-2.75h4.47v-3.78H50.06V136h4.13v-3.44H49V130h5.16v-2.75H50.06v-2.75h4.13v-1.72l6.53-.86v2.58H66.9V130h1.2v2.58H66.9v6Zm0-11.34V130h2.06v-2.75Zm0,5.33V136h2.06v-3.44Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
<path d="M29.77,175.38H48l5.67-2.23v2.23H66.56v2.92H36l-.34,7.39h12.2V183.8H37.17v-2.92H47.82v-1l6.7-.86v1.89H65.7v4.81h1.55v2.75H65.7v4.81H54.53v21.14H46.1l1.72-4.47V193.25H37.17V190.5H47.82v-2.06H35.45l-1.72,26H27.37Zm11.86,39h-6.7l4.64-12.55h6.7Zm4.64-13.92h-6.7l-3.27-5.67H43Zm8.25-16.67v1.89h5.16V183.8Zm0,4.64v2.06h5.16v-2.06ZM66,194.8l-3.44,5.67H55.9l3.27-5.67Zm-3.44,7,4.64,12.55h-6.7L55.9,201.85Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
</g>
</g>
<g>
<animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1" fill="freeze" begin="click" dur="0.5s" restart="whenNotActive"></animateTransform>
<g style="transform: translate(460px, 580px);">
<path d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z" transform="translate(-16.4 0)" fill="#c83741"></path>
<path d="M50.9,124.13v72.42A3.45,3.45,0,0,0,54.34,200h0a3.45,3.45,0,0,0,3.45-3.45h0V124.13H50.9Z" transform="translate(-16.4 0)" fill="#963737"></path>
<path d="M26.76,37.91v86.22a3.45,3.45,0,0,0,3.45,3.45H57.8a3.45,3.45,0,0,0,3.45-3.45V37.91Z" transform="translate(-16.4 0)" fill="#ff4b4b"></path>
<path d="M26.76,37.91H61.24V51.71H26.76Z" transform="translate(-16.4 0)" fill="#c83741"></path>
<path d="M17.08,36.27A365.1,365.1,0,0,0,40.89,1.75a3.64,3.64,0,0,1,6.23,0,365,365,0,0,0,23.8,34.51,3.14,3.14,0,0,1-2.46,5.09H19.55A3.14,3.14,0,0,1,17.08,36.27Z" transform="translate(-16.4 0)" fill="#ff4b4b"></path>
<path d="M61.24,58.6,26.76,68.95V55.15L61.24,44.81Zm0,27.59L26.76,96.54V82.74L61.24,72.4Zm0,27.59L26.76,124.13V110.33L61.24,100Z" transform="translate(-16.4 0)" fill="#ffcf65"></path>
<path d="M61.24,51.7v-6.9l-23,6.9Z" transform="translate(-16.4 0)" fill="#ffb450"></path>
</g>
<g style="transform: translate(450px, 560px);opacity: 0;">
<animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze"></animate>
<rect width="92" height="229" rx="12" ry="12" fill="#fc4d50"></rect>
<path d="M38.37,24.37l-2.06,1.72H26.85l12.37-10h9.28l-1.72,1.55h16L37.68,38.12H27.37L41.12,26.77ZM58,22.82h9.45L54.53,33.13H67.07v2.75L42.15,56H31.84l11.52-9.11-2.58-2.58-4.3,3.44H27ZM43.52,20.24l-.34.34L45.76,23,49,20.24ZM56.93,35.88H51.26l-5.84,4.64,2.75,2.58Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
<path d="M27.54,105.53V72.35H41.46v33.17Zm6-2.75h1.89V76H33.56ZM44.38,69.09h7.91l-.69,3.27H67.42V76H50.74l-.34,1.89H42.49Zm-1.89,39.7L55.38,83H42.49V79.4H66.38L53.49,105.18H67.42v3.61Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
<path d="M43.35,161.76V125.67H27.2v-3.44h40v3.44H51.09v36.09ZM40.6,128.08l-5,33.52H27.2l5.16-33.52ZM59,161.59l-5-33.52h8.25l5,33.52Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
<path d="M34.42,200.3l-.52,14.27H27.54l1.38-39H44.73v39H36.13L38,210.1v-9.8Zm.34-10.83-.34,7.73H38v-7.73Zm.52-10.83-.34,7.73H38v-7.73Zm32.14,21.48V203H59.68v11.52H52.81V203H45.59v-2.92h7.22v-9.45H46.1v-3.09h6.7v-12.2l6.88-1.2v13.41H66.9v3.09H59.68v9.45ZM52.29,185.69H47.48l-1.72-10h4.81Zm9.8-10H66.9l-1.72,10H60.37Z" transform="translate(-0.5 -0.5)" fill="#fff"></path>
</g>
</g>
</svg>
<!-- // 以上为嵌入微信编辑器的SVG代码 -->
</body>
</html>