SVG <ellipse>

<ellipse> 标签可用来创建椭圆。

<ellipse> 标签

<ellipse> 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的。

请把下面的代码拷贝到记事本,然后把文件保存为 "ellipse1.svg"。把此文件放入您的 web 目录:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

代码解释:

  • cx 属性定义圆点的 x 坐标

  • cy 属性定义圆点的 y 坐标

  • rx 属性定义水平半径

  • ry 属性定义垂直半径

查看例子

下面的例子创建了三个累叠而上的椭圆:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple"/>

<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime"/>

<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow"/>

</svg>

查看例子

下面的例子组合了两个椭圆(一个黄的和一个白的):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>

<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>

</svg>
推荐阅读:
php 生成图片,给图片加水印   阅读:7221人性漫画:打工与创业的残酷区别   阅读:5629给php7安装redis扩展库   阅读:9169php swoole搭建简单的聊天室   阅读:5430shell发送邮件脚本   阅读:9767shell脚本批量删除几天前的文件   阅读:11445mysql5.7主从同步配置   阅读:7484centos7开启交换内存   阅读:12131csv文件一键导入数据到mysql数据库   阅读:7526mysql5.7主从同步中binlog同步模式详解   阅读:8826php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:6579php 使用 smtp.php 类在线发送邮件功能   阅读:6507网站局部小图片优化-base64编码图片   阅读:20788一步步带你,如何网站架构   阅读:4854php打印九九加法表   阅读:12079把php session 会话保存到redis   阅读:8190nginx安装mysql和json模块   阅读:6436session与cookie的区别   阅读:4720crontab+shell脚本实现定时备份mysql数据库   阅读:8484centos7开启交换内存   阅读:12131centos 7 安装 nginx-1.11.10   阅读:9384php打印九九加法表   阅读:12079centos 7 安装 php-7.1.3   阅读:21834php 统计网页打开耗时和脚本运行内存   阅读:7499centos7.3安装mongodb3.6   阅读:8497php设置cookie为HttpOnly防止XSS攻击   阅读:13941知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:7622知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:7622web性能测试工具ab的测试方法   阅读:5319shell发送邮件脚本   阅读:9767移动端js触摸touch详解(附带案例源码)   阅读:18160php swoole搭建简单的聊天室   阅读:5430php+redis实现消息队列   阅读:16529shell脚本统计当前服务器并发连接数   阅读:8658php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:6579centos 7 设置 nginx-1.11.10 开机启动   阅读:8782shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:10065shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:10065linux rarcrack破解rar、zip和7z压缩包简单密码的工具   阅读:19141centos 7 添加 redis 3.2.9 开机启动脚本   阅读:10365PHP 鸟哥:我也曾经是“不适合”编程的人   阅读:16047分享:淘宝技术这十年   阅读:5315php连接redis   阅读:6354一步步带你,如何网站架构   阅读:4854最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:11928栈和堆的区别   阅读:5745shell脚本批量删除几天前的文件   阅读:11445shell发送邮件脚本   阅读:9767phpexcel 超简单从数据库一键导出数据到excel教程   阅读:8126比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:5999