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

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

本帖最后由 不二如是 于 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>
效果图：
**** Hidden Message *****

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

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

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

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

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

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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

{:10_277:}

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

回复看帖

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

看啊
页: [1]
查看完整版本: 0 0 8 0 - 最纯纯的SVG玩法 - circle & elipse