SVG 椭圆学习笔记

介绍

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它支持多种图形元素，包括椭圆。

椭圆是一个非常常见的图形元素，它比圆更加灵活，可以在各种场景中使用。在 SVG 中，椭圆是通过 <ellipse> 元素来表示的。

<ellipse> 元素

<ellipse> 元素定义了一个椭圆形。它有两个必需属性： cx 和 cy，分别表示椭圆的中心点坐标。另外还有两个可选属性： rx 和 ry，分别表示椭圆水平半径和垂直半径。

htmlCopy Code
<svg width="200" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="red" />
</svg>

上面的代码定义了一个宽为 200，高为 100 的 SVG 画布，并在其中绘制了一个中心点坐标为 (50, 50)，水平半径为 40，垂直半径为 20，填充颜色为红色的椭圆。

实例

下面是一些实例，演示了如何在 SVG 中使用椭圆。

绘制一个蓝色椭圆

htmlCopy Code
<svg width="200" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="blue" />
</svg>

绘制一个黄色椭圆带描边

htmlCopy Code
<svg width="200" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow" stroke="black" stroke-width="2" />
</svg>

绘制一个橙色椭圆带阴影

htmlCopy Code
<svg width="200" height="100">
  <defs>
    <filter id="shadow">
      <feOffset dx="1" dy="1" result="offset_result"/>
      <feGaussianBlur in="offset_result" stdDeviation="2" result="blur_result"/>
      <feMerge>
        <feMergeNode in="blur_result"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="orange" filter="url(#shadow)" />
</svg>

上面的代码使用了 SVG 的滤镜特性，给橙色椭圆添加了一个阴影效果。

总结

本文介绍了 SVG 中的椭圆元素 <ellipse>，并演示了一些实例。SVG 拥有丰富的图形元素和特性，可以用来创建各种复杂的矢量图形。