SVG椭圆轮廓与填充层对齐异常问题求助

我有两个SVG文件：一个是透明描边椭圆，一个是无描边填充椭圆，想要让描边椭圆完全覆盖填充椭圆，但始终无法做到边缘对齐。

初始CSS代码 #

.character {
    position: relative;
    width: 200px; /* Adjust the size as needed */
    height: 400px; /* Adjust the size as needed */
}

.part {
    position: absolute;
}

.head {
    animation: float 2s ease-in-out infinite;
}
.headcolor {
   z-index: 1;
   margin-top: -200px;
   position: relative; 
  top: 0; 
  left: 0; 
}

.headoutline {
   z-index: 2;
   position: relative;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Starting position */
    }
    50% {
        transform: translateY(-5px); /* Float up by 10 pixels */
    }
}

初始效果 #

两个椭圆错位明显，填充椭圆位于描边椭圆下方偏上的位置，完全无法对齐。修改.headcolor的margin-top为-500px后，位置没有任何变化，错位问题依旧存在。

预期效果 #

两个椭圆完全重合，描边完美包裹填充椭圆的边缘。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Assembly</title>
    <link rel="stylesheet" href="player.css">
</head>
<body>
    <div class="character">
        <!-- Outline SVG -->
        <div class="head">
        <object data="/svgs/head/shapes/9.svg" type="image/svg+xml" class="headoutline"></object>
        <!-- Filling SVG -->
        <object data="/svgs/head/shapes/7.svg" type="image/svg+xml" class="headcolor"></object>
    </div>
      <!--  <object data="body.svg" type="image/svg+xml" class="part body"></object>
        <object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
        <object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>
    </div> -->

    <script src="player.js"></script>
</body>
</html>

9/26更新 #

修改了.headoutline的CSS代码：

.headoutline {
   z-index: 2;
   position: relative;
   width: 100%; 
   height: 100%; 
}

现在两个SVG位置更接近，但轮廓仍无法完全覆盖填充椭圆，边缘存在细微错位。

1. 统一两个SVG的基础属性 #

打开两个SVG文件，确保它们的viewBox、width、height属性完全一致，同时椭圆的cx、cy、rx、ry参数也要完全相同。示例：

<!-- 填充椭圆SVG -->
<svg viewBox="0 0 200 200" width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="100" fill="#your-color" />
</svg>

<!-- 描边椭圆SVG -->
<svg viewBox="0 0 200 200" width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="100" fill="transparent" stroke="#your-stroke-color" stroke-width="2" />
</svg>

这是解决错位的核心——如果SVG本身的画布或路径参数不一致，CSS再怎么调整也没法完美对齐。

2. 用绝对定位实现精准重叠 #

修改CSS，利用父容器相对定位+子元素绝对定位，让两个SVG完全重叠：

.character {
    position: relative;
    width: 200px;
    height: 400px;
}

.head {
    position: relative;
    width: 200px; /* 和SVG的width一致 */
    height: 200px; /* 和SVG的height一致 */
    animation: float 2s ease-in-out infinite;
}

.headcolor, .headoutline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.headcolor {
    z-index: 1;
}

.headoutline {
    z-index: 2;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

移除之前多余的margin-top和不必要的relative定位干扰，让两个SVG基于父容器的左上角精准对齐。

3. 检查SVG描边的对齐方式 #

SVG的描边默认是居中对齐（即描边一半在路径内侧，一半在外侧），如果描边宽度过大，可能会导致视觉上的错位。可以给描边椭圆添加stroke-alignment="inside"（主流SVG编辑器均支持），或者微调rx/ry参数，让描边刚好贴合填充椭圆的边缘。

内容的提问来源于stack exchange，提问作者user27361334