论坛 › 音乐沙龙 › 鸿蒙

马黑黑 发表于 2023-11-21 21:56

鸿蒙

本帖最后由 马黑黑 于 2023-11-21 23:36 编辑 <br /><br /><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>

马黑黑 发表于 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)

红影 发表于 2023-11-21 22:16

奇怪，在你那里画面是满的，这里的怎么两边是空的？{:4_203:}

红影 发表于 2023-11-21 22:19

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

马黑黑 发表于 2023-11-21 23:24

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

前面修改中。

马黑黑 发表于 2023-11-21 23:25

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

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

马黑黑 发表于 2023-11-21 23:40

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

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

小文 发表于 2023-11-22 08:50

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

小文 发表于 2023-11-22 08:51

喜欢那个转的伞

红影 发表于 2023-11-22 10:13

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

看到了，现在完全好了{:4_173:}

红影 发表于 2023-11-22 10:14

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

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

红影 发表于 2023-11-22 10:20

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

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

马黑黑 发表于 2023-11-22 12:19

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

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

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

马黑黑 发表于 2023-11-22 12:20

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

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

马黑黑 发表于 2023-11-22 12:20

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

和用div做的一样了

马黑黑 发表于 2023-11-22 12:20

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

{:4_191:}

马黑黑 发表于 2023-11-22 12:20

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

{:4_190:}

红影 发表于 2023-11-22 14:11

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

小儿麻痹症，这词用的，看得笑喷{:4_173:}

红影 发表于 2023-11-22 14:11

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

是的，这个小伞用在这里也十分漂亮呢{:4_199:}

红影 发表于 2023-11-22 14:14

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

哦，那里的是你自己做的整站系统，黑黑太厉害了{:4_199:}

查看完整版本: 鸿蒙