设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 8 0 - 最纯纯的SVG玩法 - circle & elipse
返回列表 发新帖
查看: 2623|回复: 14

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

[复制链接]
不二如是
发表于 2017-3-15 14:40:29 | 显示全部楼层 |阅读模式

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

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

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

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

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

先创建两个圆形
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 66px;
  9.             background: #000;
  10.         }
  11.         #circle1:hover{
  12.             stroke: #F4A;
  13.             stroke-width: 30px;
  14.         }

  16.     </style>
  17. </head>
  18. <body>
  19.     <svg height="1111px" width="1111px">
  20.         <circle r="66px" cx="111" cy="111" id="circle1" fill="#3F3"/>
  21.         <circle r="66px" cx="333" cy="111" id="circle2" fill="#AFA"/>
  22.     </svg>
  23. </body>
  24. </html>
复制代码

效果图：
111.gif


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

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

接下来画椭圆形，ellipse
  1. <svg height="1111px" width="1111px">
  2.         /*其他*/
  3.         <ellipse rx="200px" ry="33px" cx="222" cy="250" id="elipse1" fill="#FFF"/>
  4.         <ellipse rx="200px" ry="33px" cx="222" cy="240" id="elipse2" fill="#000"/>
  5.     </svg>
复制代码

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


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

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

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

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

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

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


官方 Web 课程：

评分

参与人数 1贡献 +3 收起 理由
睦ちゃん她爹 + 3 无条件支持楼主！

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

sherazhan
发表于 2017-7-18 11:41:34 | 显示全部楼层
svg666
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-24 01:42:03 | 显示全部楼层
回复看帖！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-8-24 02:02:53 | 显示全部楼层
交作业！
080.jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

a211827754
发表于 2018-8-23 19:34:58 | 显示全部楼层
好好看好好学
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

莫希
发表于 2019-1-14 21:08:12 | 显示全部楼层
RE: 0 0 8 0 - 最纯纯的SVG玩法 - circle & elipse [修改]
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

睁眼睡大觉
发表于 2019-3-30 18:52:26 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>0080</title>
  6.                 <style type="text/css">
  7.                         body{
  8.                                 margin:66px;
  9.                                 background: #000;
  10.                         }
  11.                         #circle1:hover{
  12.                                 stroke: #F4A;
  13.                                 stroke-width: 30px;
  14.                         }
  15.                 </style>
  16.         </head>
  17.         <body>
  18.                 <svg height="1111px" width="1111px">
  19.                         <circle r="66px" cx="111" cy="111" id="circle1" fill="#3F3"/>
  20.                         <circle r="66px" cx="333" cy="111" id="circle2" fill="#AFA"/>
  21.                         <ellipse rx="200px" ry="33px" cx="222" cy="250" id="elipse1" fill="#FFF"/>
  22.                         <ellipse rx="200px" ry="33px" cx="222" cy="240" id="elipse2" fill="#000"/>
  23.                 </svg>
  24.         </body>
  25. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-13 17:34:50 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 66px;
  9.             background: #000;
  10.         }
  11.         #circle1:hover{
  12.             stroke: #F4A;
  13.             stroke-width: 30px;
  14.         }

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

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

  26. </svg>

  28. </body>
  29. </html>
复制代码


小青蛙头让我明白了弧线是通过两个椭圆进行覆盖得出。
1578908021(1).jpg
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

笋头蒜头
发表于 2020-3-20 11:17:17 | 显示全部楼层
哈哈哈哈
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

weiter
发表于 2020-3-29 14:26:12 | 显示全部楼层
wow，想学！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

287187056
头像被屏蔽
发表于 2020-4-2 12:06:58 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

小脑斧
发表于 2020-4-11 17:20:56 | 显示全部楼层
本帖最后由 小脑斧 于 2020-4-11 17:22 编辑

test_3.png
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>svg玩法练习</title>
  7.     <style type="text/css">
  8.         body{
  9.             background: #000000;
  10.             margin: 111px;
  11.             margin-right: 111px;
  12.         }
  13.         .circle1{
  14.             fill: yellow;
  15.         }
  16.         .ellipse1,.ellipse2{
  17.             fill: yellowgreen;
  18.         }
  19.         .rect1:hover{
  20.             fill: #ff8888;
  21.         }
  22.         .circle1:hover{
  23.             fill: yellowgreen;
  24.         }
  25.         .ellipse1:hover{
  26.             stroke:wheat;
  27.             stroke-width: 10px;
  28.         }
  29.         .ellipse2:hover{
  30.             stroke:wheat;
  31.             stroke-width: 10px;
  32.         }
  33.         .rect4:hover{
  34.             fill:#3f3;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.         <svg height = "999px" width = "333px"><!--需指定px单位-->
  40.             <rect class="rect1" height="111px" width="111px" fill="#3fa"/>
  41.             <rect class="rect2" height="111px" width="111px" fill="#3fa" x="222px"/>
  42.             <ellipse class="ellipse1" rx="50px" ry="25px" cx="0" cy="172" />
  43.             <circle class="circle1" r="30px"   cx="166.5px" cy="172px"/>
  44.             <ellipse class="ellipse2" rx="50px" ry="25px" cx="333" cy="172" />
  45.             <rect class="rect4" height="33px" width="333px" fill="#f88" y="222px"/>
  46.         </svg>
  47. </body>
  48. </html>
复制代码


想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

tianyuan
发表于 2020-6-3 21:14:29 | 显示全部楼层
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

1041556532
发表于 2020-6-16 05:03:21 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

红tea少年
发表于 2022-6-3 15:19:19 | 显示全部楼层
看啊
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 11:42

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表