鸿蒙

马黑黑

马黑黑

代码：

1. <style>
   
2. #mysvg {
   
3.         display: block;
   
4.         margin: -70px 0 0 calc(50% - 593px);
   
5.         width: 1024px;
   
6.         height: 640px;
   
7.         background: url('https://638183.freep.cn/638183/t23/webp2/hsmg.webp') no-repeat center/cover;
   
8.         box-shadow: 3px 3px 20px #000;
   
9.         z-index: 1;
   
10.         position: relative;
    
11. }
    
12. 
    
13. #san > g { opacity: 0.75; }
    
14. 
    
15. </style>
    
16. 
    
17. <svg id="mysvg">
    
18.         <symbol id="san">
    
19.                 <g transform="rotate(0,100 100)">
    
20.                         <path d="M 100 100 L200.00 100.00 A 100 100 0 0 1 162.35 21.82 L100 100" fill="red" />
    
21.                         <path d="M 100 100 L162.35 21.82 A 100 100 0 0 1 77.75 2.51 L100 100" fill="orange" />
    
22.                         <path d="M 100 100 L77.75 2.51 A 100 100 0 0 1 9.90 56.61 L100 100" fill="yellow" />
    
23.                         <path d="M 100 100 L9.90 56.61 A 100 100 0 0 1 9.90 143.39 L100 100" fill="green" />
    
24.                         <path d="M 100 100 L9.90 143.39 A 100 100 0 0 1 77.75 197.49 L100 100" fill="cyan" />
    
25.                         <path d="M 100 100 L77.75 197.49 A 100 100 0 0 1 162.35 178.18 L100 100" fill="blue" />
    
26.                         <path d="M 100 100 L162.35 178.18 A 100 100 0 0 1 200.00 100.00 L100 100" fill="purple" />
    
27.                         <circle id="yuan" cx="100" cy="100" r="5" fill="silver" />
    
28.                         <animateTransform attributeName="transform" type="rotate" to="360,100 100" repeatCount="indefinite" dur="6s" />
    
29.                 </g>
    
30.         </symbol>
    
31.         <use x="810" y="10" height="200" width="200" href="#san" transform="rotate(10)" />
    
32. </svg>
    
33. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2068482355" autoplay loop ></audio>
    
34. 
    
35. <script>
    
36. 
    
37. let mState = () => aud.paused ? mysvg.pauseAnimations() : mysvg.unpauseAnimations();
    
38. aud.addEventListener('pause', () => mState());
    
39. aud.addEventListener('play', () => mState());
    
40. san.addEventListener('click', () => {
    
41.         aud.paused ? aud.play() : aud.pause();
    
42. });
    
43. 
    
44. </script>

复制代码

修改前，svg的表现有点怪异： 背景半透明。原因：svg设置为 display: block 但没有设置 position，导致前述问题，同时 z-index 的设置也无效。现已纠正。
本帖首发：鸿蒙 (52qingyin.cn)

红影

奇怪，在你那里画面是满的，这里的怎么两边是空的？

红影

哦，现在好了，不是空了。只是还是能透出后面的东西。

马黑黑

红影 发表于 2023-11-21 22:16
奇怪，在你那里画面是满的，这里的怎么两边是空的？

前面修改中。

马黑黑

红影 发表于 2023-11-21 22:19
哦，现在好了，不是空了。只是还是能透出后面的东西。

图片做svg的背景，之前也用过，还没见过这个效果

马黑黑

红影 发表于 2023-11-21 22:19
哦，现在好了，不是空了。只是还是能透出后面的东西。

找到原因了，情况说明在二楼。

小文

看二位先生聊得很高深，不敢多言。静静坐着观察一下地形

小文

喜欢那个转的伞

红影

马黑黑 发表于 2023-11-21 23:24
前面修改中。

看到了，现在完全好了

红影

马黑黑 发表于 2023-11-21 23:25
图片做svg的背景，之前也用过，还没见过这个效果

再你那里是好的，可能论坛的数据库不一样的缘故吧。

红影

马黑黑 发表于 2023-11-21 23:40
找到原因了，情况说明在二楼。

看到了，原来需要原来需要设置 position。有这个又可以跟着做了

马黑黑

红影 发表于 2023-11-22 10:20
看到了，原来需要原来需要设置 position。有这个又可以跟着做了

canvas标签，svg标签，都是行内元素，如果需要直接控制它们而不是包裹在一个 div 内，那么，需要设置它的 display 属性，值为 block，块元素，然后还应该设置 position 为 relative，不设置也可以控制它，但 svg 就发生怪异的表现行为，这是第一次发现。

具体原因可能在于 svg 的特性，行内元素改为块元素之后，不配套设置定位，它就给你一个小儿麻痹症瞧瞧。

马黑黑

红影 发表于 2023-11-22 10:14
再你那里是好的，可能论坛的数据库不一样的缘故吧。

我哪里由于实现机制是我自己设计的，它的壮硕性能比较牢靠。

马黑黑

红影 发表于 2023-11-22 10:13
看到了，现在完全好了

和用div做的一样了

马黑黑

小文 发表于 2023-11-22 08:51
喜欢那个转的伞

马黑黑

小文 发表于 2023-11-22 08:50
看二位先生聊得很高深，不敢多言。静静坐着观察一下地形

红影

马黑黑 发表于 2023-11-22 12:19
canvas标签，svg标签，都是行内元素，如果需要直接控制它们而不是包裹在一个 div 内，那么，需要设置它的 ...

小儿麻痹症，这词用的，看得笑喷

红影

马黑黑 发表于 2023-11-22 12:20
和用div做的一样了

是的，这个小伞用在这里也十分漂亮呢

红影

马黑黑 发表于 2023-11-22 12:20
我哪里由于实现机制是我自己设计的，它的壮硕性能比较牢靠。

哦，那里的是你自己做的整站系统，黑黑太厉害了