0 0 8 0 - 最纯纯的SVG玩法 - circle & elipse

不二如是 · 发表于 2017-3-15 14:40:29

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 11:10 编辑

在79利用svg的rect设计了一个呆呆的表情。

这次利用circle - 圆和elipse - 椭圆设计一个笑脸表情。

先创建两个圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        body{
            margin: 66px;
            background: #000;
        }
        #circle1:hover{
            stroke: #F4A;
            stroke-width: 30px;
        }

    </style>
</head>
<body>
    <svg height="1111px" width="1111px">
        <circle r="66px" cx="111" cy="111" id="circle1" fill="#3F3"/>
        <circle r="66px" cx="333" cy="111" id="circle2" fill="#AFA"/>
    </svg>
</body>
</html>

效果图：

r代表圆的半径，cx圆心x坐标，cy圆心y坐标。

在CSS中设置circle的hover属性，当鼠标滑过时，设置30px的#F4A色边框

接下来画椭圆形，ellipse

<svg height="1111px" width="1111px">
        /*其他*/
        <ellipse rx="200px" ry="33px" cx="222" cy="250" id="elipse1" fill="#FFF"/>
        <ellipse rx="200px" ry="33px" cx="222" cy="240" id="elipse2" fill="#000"/>
    </svg>

效果图：

游客，如果您要查看本帖隐藏内容请回复

rx代表椭圆形的横轴半径，ry是椭圆形纵轴半径。

cx，cy分别代表椭圆中心x，y坐标。

两个椭圆的填充色，一个是白色，一个是背景色。

此处就是利用74中的障眼法形成一个弧线。

当然svg中可以使用line绘制线条，然后增加线宽，也能做出弧线，有兴趣自己玩～

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

sherazhan · 发表于 2017-7-18 11:41:34

svg666

aswyamato1989 · 发表于 2017-8-24 01:42:03

回复看帖！

aswyamato1989 · 发表于 2017-8-24 02:02:53

交作业！

a211827754 · 发表于 2018-8-23 19:34:58

好好看好好学

莫希 · 发表于 2019-1-14 21:08:12

RE: 0 0 8 0 - 最纯纯的SVG玩法 - circle & elipse [修改]

睁眼睡大觉 · 发表于 2019-3-30 18:52:26

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>0080</title>
                <style type="text/css">
                        body{
                                margin:66px;
                                background: #000;
                        }
                        #circle1:hover{
                                stroke: #F4A;
                                stroke-width: 30px;
                        }
                </style>
        </head>
        <body>
                <svg height="1111px" width="1111px">
                        <circle r="66px" cx="111" cy="111" id="circle1" fill="#3F3"/>
                        <circle r="66px" cx="333" cy="111" id="circle2" fill="#AFA"/>
                        <ellipse rx="200px" ry="33px" cx="222" cy="250" id="elipse1" fill="#FFF"/>
                        <ellipse rx="200px" ry="33px" cx="222" cy="240" id="elipse2" fill="#000"/>
                </svg>
        </body>
</html>

suweixuan1998 · 发表于 2020-1-13 17:34:50

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        body{
            margin: 66px;
            background: #000;
        }
        #circle1:hover{
            stroke: #F4A;
            stroke-width: 30px;
        }

    </style>
</head>
<body>
<svg height="1111px" width="1111px">
    <circle r="66px" cx="111" cy="111" id="circle1" fill="#3F3"/>
    <circle r="66px" cx="333" cy="111" id="circle2" fill="#AFA"/>

        <ellipse rx="200px" ry="33px" cx="222" cy="250" id="elipse1" fill="#FFF"/>
        <ellipse rx="200px" ry="33px" cx="222" cy="240" id="elipse2" fill="#3f2"/>

</svg>

</body>
</html>

小青蛙头让我明白了弧线是通过两个椭圆进行覆盖得出。

笋头蒜头 · 发表于 2020-3-20 11:17:17

哈哈哈哈

weiter · 发表于 2020-3-29 14:26:12

wow，想学！

287187056 · 发表于 2020-4-2 12:06:58

提示: 作者被禁止或删除内容自动屏蔽

小脑斧 · 发表于 2020-4-11 17:20:56

本帖最后由小脑斧于 2020-4-11 17:22 编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg玩法练习</title>
    <style type="text/css">
        body{
            background: #000000;
            margin: 111px;
            margin-right: 111px;
        }
        .circle1{
            fill: yellow;
        }
        .ellipse1,.ellipse2{
            fill: yellowgreen;
        }
        .rect1:hover{
            fill: #ff8888;
        }
        .circle1:hover{
            fill: yellowgreen;
        }
        .ellipse1:hover{
            stroke:wheat;
            stroke-width: 10px;
        }
        .ellipse2:hover{
            stroke:wheat;
            stroke-width: 10px;
        }
        .rect4:hover{
            fill:#3f3;
        }
    </style>
</head>
<body>
        <svg height = "999px" width = "333px"><!--需指定px单位-->
            <rect class="rect1" height="111px" width="111px" fill="#3fa"/>
            <rect class="rect2" height="111px" width="111px" fill="#3fa" x="222px"/>
            <ellipse class="ellipse1" rx="50px" ry="25px" cx="0" cy="172" />
            <circle class="circle1" r="30px"   cx="166.5px" cy="172px"/>
            <ellipse class="ellipse2" rx="50px" ry="25px" cx="333" cy="172" />
            <rect class="rect4" height="33px" width="333px" fill="#f88" y="222px"/>
        </svg>
</body>
</html>

tianyuan · 发表于 2020-6-3 21:14:29

1041556532 · 发表于 2020-6-16 05:03:21

回复看帖

红tea少年 · 发表于 2022-6-3 15:19:19

看啊

账号		自动登录	找回密码
密码			立即注册

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-2 12:06:58 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

[庖丁解牛] 0 0 8 0 - 最纯纯的SVG玩法 - circle & elipse

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: