马黑黑 发表于 2024-10-12 21:40

svg:棒棒糖播放器

<div id="mydiv" style="text-align: center">

<svg width="320" height="320" viewBox="-160 -160 320 320" xmlns="http://www.w3.org/2000/svg">
        <defs>
                <filter id="shadow">
                        <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black" />
                </filter>
                <g id="part" filter="url(#shadow)">
                        <line x1="0" y1="-100" x2="0" y2="100" stroke="tan" stroke-width="6"/>
                        <ellipse cx="0" cy="-125" rx="20" ry="25" fill="lightgreen"/>
                        <ellipse cx="0" cy="125" rx="20" ry="25" fill="lightgreen"/>
                </g>
        </defs>
        <use href="#part" />
        <use href="#part" transform="rotate(35)" />
        <use href="#part" transform="rotate(70)" />
        <use href="#part" transform="rotate(105)" />
        <use href="#part" transform="rotate(140)" />
</svg>

</div>
<div class="hE"><pre id="pre"></pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
pre.textContent = mydiv.innerHTML;
</script>

红影 发表于 2024-10-12 21:51

这个好漂亮，而且被黑黑取了个这么有情趣的名字{:4_173:}

红影 发表于 2024-10-12 21:53

这个椭圆正好接上直线，其实靠里面一点也没事的吧，反正能遮挡掉直线的{:4_173:}

红影 发表于 2024-10-12 21:56

180度被5除，应该是36度，为了后面角度计算方便，所以取的35度一档吧。
svg图图真的可以创造出无数好玩的图案呢。黑黑厉害{:4_199:}

马黑黑 发表于 2024-10-12 22:07

红影 发表于 2024-10-12 21:51
这个好漂亮，而且被黑黑取了个这么有情趣的名字

俺以前卖棒棒糖就是这样做造型的

马黑黑 发表于 2024-10-12 22:08

红影 发表于 2024-10-12 21:53
这个椭圆正好接上直线，其实靠里面一点也没事的吧，反正能遮挡掉直线的

是的

马黑黑 发表于 2024-10-12 22:08

红影 发表于 2024-10-12 21:56
180度被5除，应该是36度，为了后面角度计算方便，所以取的35度一档吧。
svg图图真的可以创造出无数好玩的 ...

省事，俺心算不强{:4_170:}

红影 发表于 2024-10-12 22:28

马黑黑 发表于 2024-10-12 22:07
俺以前卖棒棒糖就是这样做造型的

棍倒挺长，糖小了啊{:4_173:}

红影 发表于 2024-10-12 22:29

马黑黑 发表于 2024-10-12 22:08
是的

是不是哪个图形写在后面，就在上层吧。

红影 发表于 2024-10-12 22:30

马黑黑 发表于 2024-10-12 22:08
省事，俺心算不强

聪明，反正差一度也看不出来{:4_173:}

马黑黑 发表于 2024-10-12 23:23

红影 发表于 2024-10-12 22:30
聪明，反正差一度也看不出来

就是不太严谨，不过也没什么，不一定都得均衡分布

马黑黑 发表于 2024-10-12 23:24

红影 发表于 2024-10-12 22:29
是不是哪个图形写在后面，就在上层吧。

svg元素的层级关系一般遵循后来者居上的原则，和HTML元素一样。

马黑黑 发表于 2024-10-12 23:25

红影 发表于 2024-10-12 22:28
棍倒挺长，糖小了啊

棒棒糖重在艺术，其次才是和吃有关

梦江南 发表于 2024-10-13 07:32

棒棒糖的名字勾起小时候的回忆。老师早上好！

马黑黑 发表于 2024-10-13 08:07

梦江南 发表于 2024-10-13 07:32
棒棒糖的名字勾起小时候的回忆。老师早上好！

早啊

红影 发表于 2024-10-13 09:52

马黑黑 发表于 2024-10-12 23:23
就是不太严谨，不过也没什么，不一定都得均衡分布

是的，知道怎么弄才是第一位的，具体的做法按自己的来就好{:4_187:}

红影 发表于 2024-10-13 09:53

马黑黑 发表于 2024-10-12 23:24
svg元素的层级关系一般遵循后来者居上的原则，和HTML元素一样。

就多个底图的css里是反的吧，其他的貌似都是后来者居上呢。

红影 发表于 2024-10-13 09:53

马黑黑 发表于 2024-10-12 23:25
棒棒糖重在艺术，其次才是和吃有关

哈哈，黑黑还挺有童心的{:4_173:}

花飞飞 发表于 2024-10-13 10:12

这个棒棒糖好看又甜{:4_170:}

马黑黑 发表于 2024-10-13 10:24

花飞飞 发表于 2024-10-13 10:12
这个棒棒糖好看又甜

舔过了？{:4_170:}
页: [1] 2 3 4 5 6 7
查看完整版本: svg:棒棒糖播放器