突破编程_前端_SVG（ellipse 椭圆形）

1 ellipse 元素的基本属性和用法

ellipse 元素用于创建椭圆形状。它具有一系列的基本属性，允许自定义椭圆的外观和位置。以下是一些 ellipse 元素的基本属性和用法：

（1）基本属性

1. cx 和 cy：这两个属性定义了椭圆中心的 x 和 y 坐标。默认情况下，椭圆的中心位于坐标系的原点（0,0）。
2. rx 和 ry：这两个属性分别定义了椭圆在 x 轴和 y 轴上的半径。这决定了椭圆的大小和形状。
3. fill：这个属性用于设置椭圆内部的填充颜色。你可以使用颜色名称、十六进制颜色代码、RGB 值等来指定颜色。如果不设置填充颜色，椭圆将默认不填充（透明）。
4. stroke：这个属性用于设置椭圆的描边颜色。同样，你可以使用各种颜色格式来指定描边颜色。
5. stroke-width：这个属性用于设置椭圆的描边宽度。描边宽度的值是非负整数，默认为 1。如果设置为 0，椭圆将没有描边。
6. stroke-linecap：这个属性定义了描边端点的形状，可以取值 “butt”（默认值）、“round” 或 “square”。
7. stroke-linejoin：这个属性定义了描边在两条线交叉时的连接方式，可以取值 “miter”（默认值）、“round” 或 “bevel”。

（2）用法示例

以下是一个简单的SVG示例，展示了如何使用 ellipse 元素及其基本属性来创建一个带有描边和填充颜色的椭圆：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" stroke="red" stroke-width="2" />
</svg>

在这个示例中，我们创建了一个宽度为200、高度为200的SVG画布。在画布上，我们使用 ellipse 元素创建了一个椭圆。椭圆的中心位于(100,100)，x轴半径为50，y轴半径为30。椭圆内部填充为蓝色，描边为红色，描边宽度为2。

2 高级 ellipse 元素的样式设置

2.1 使用 CSS 为 ellipse 元素添加样式

当使用CSS为SVG中的 ellipse 元素添加样式时，你可以通过内联样式、内部样式表或外部样式表来实现。SVG是XML的一种形式，因此它可以接受内联样式，也可以链接到外部的CSS样式表。下面我们将详细讲解如何使用这些方法为 ellipse 元素添加样式。

（1）内联样式

内联样式是直接在 SVG 元素上通过 style 属性添加 CSS 样式。这种方法的优点是简单直观，但缺点是如果多个元素需要相同的样式，会造成代码冗余。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="50" ry="30"
           style="fill:blue; stroke:red; stroke-width:2;" />
</svg>

在这个例子中， ellipse 元素的 style 属性中定义了填充颜色（ fill ）、描边颜色（ stroke ）和描边宽度（ stroke-width ）。

（2）内部样式表

内部样式表是将 CSS 样式定义在SVG文档的 <style> 元素内。这种方式可以让你复用样式规则，减少代码冗余。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .myEllipse {
     
     
      fill: blue;
      stroke: red;
      stroke-width: 2;
    }
  </style>
  <ellipse cx="100" cy="100" rx="50" ry="30" class="myEllipse" />
</svg>

在这个例子中，我们定义了一个 CSS 类 .myEllipse ，并在 ellipse 元素上通过 class 属性应用了这个类。这样，我们就可以在多个 ellipse 元素上复用这个样式了。

（3）外部样式表

如果有一个大型的 SVG 文档或者多个 SVG 文档需要共享相同的样式，则可以考虑使用外部样式表。外部样式表是一个单独的 CSS 文件，你可以通过SVG文档的 <link> 元素或HTML文档的 <style> 元素引用它。

假设有一个名为 styles.css 的外部样式表，内容如下：

.myEllipse {
   
   
  fill: blue;
  stroke: red;
  stroke-width: 2