|
|

楼主 |
发表于 2023-11-21 22:04
|
显示全部楼层
本帖最后由 马黑黑 于 2023-11-21 23:40 编辑
代码:
- <style>
- #mysvg {
- display: block;
- margin: -70px 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/webp2/hsmg.webp') no-repeat center/cover;
- box-shadow: 3px 3px 20px #000;
- z-index: 1;
- position: relative;
- }
- #san > g { opacity: 0.75; }
- </style>
- <svg id="mysvg">
- <symbol id="san">
- <g transform="rotate(0,100 100)">
- <path d="M 100 100 L200.00 100.00 A 100 100 0 0 1 162.35 21.82 L100 100" fill="red" />
- <path d="M 100 100 L162.35 21.82 A 100 100 0 0 1 77.75 2.51 L100 100" fill="orange" />
- <path d="M 100 100 L77.75 2.51 A 100 100 0 0 1 9.90 56.61 L100 100" fill="yellow" />
- <path d="M 100 100 L9.90 56.61 A 100 100 0 0 1 9.90 143.39 L100 100" fill="green" />
- <path d="M 100 100 L9.90 143.39 A 100 100 0 0 1 77.75 197.49 L100 100" fill="cyan" />
- <path d="M 100 100 L77.75 197.49 A 100 100 0 0 1 162.35 178.18 L100 100" fill="blue" />
- <path d="M 100 100 L162.35 178.18 A 100 100 0 0 1 200.00 100.00 L100 100" fill="purple" />
- <circle id="yuan" cx="100" cy="100" r="5" fill="silver" />
- <animateTransform attributeName="transform" type="rotate" to="360,100 100" repeatCount="indefinite" dur="6s" />
- </g>
- </symbol>
- <use x="810" y="10" height="200" width="200" href="#san" transform="rotate(10)" />
- </svg>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2068482355" autoplay loop ></audio>
- <script>
- let mState = () => aud.paused ? mysvg.pauseAnimations() : mysvg.unpauseAnimations();
- aud.addEventListener('pause', () => mState());
- aud.addEventListener('play', () => mState());
- san.addEventListener('click', () => {
- aud.paused ? aud.play() : aud.pause();
- });
- </script>
复制代码
修改前,svg的表现有点怪异: 背景半透明。原因:svg设置为 display: block 但没有设置 position,导致前述问题,同时 z-index 的设置也无效。现已纠正。
本帖首发:鸿蒙 (52qingyin.cn)
|
|