SVG圆形＜circle＞，椭圆形＜ellipse＞的示例代码

news2025/1/10 23:45:37

本专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。
本专栏的风格是力求简洁明了。

SVG使用来创建圆形. SVG使用来绘制一个椭圆，包括圆。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的

圆形规则

在这里插入图片描述

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)。 r属性定义圆的半径。

椭圆形规则

在这里插入图片描述
RX属性定义的水平半径，RY属性定义的垂直半径。

圆形效果图

在这里插入图片描述

圆形源代码

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="150" cy="50" r="50" stroke="green" stroke-width="2" fill="yellow" />
</svg> 
 
</body>
</html>

椭圆形效果图

在这里插入图片描述

椭圆形源代码

							<svg 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1"
     width="400" 
     height="200"
     >
  <text x="30" y="30">椭圆</text>
  <text x="200" y="30">特殊的椭圆-圆</text>
  <ellipse cx="100" cy="100" rx="80" ry="50" style="fill:yellow;stroke:burlywood;stroke-width:2"></ellipse>
  <ellipse cx="250" cy="100" rx="50" ry="50" style="fill:purple;stroke:burlywood;stroke-width:2"></ellipse>
</svg>

SVG 的历史和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大
SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 JavaScript 技术一起运行 SVG 是开放的标准
SVG文件是纯粹的 XML SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。