使用不同位置时SVG圆圈的悬停状态不一致

首先，我对前端编码还不熟悉，所以请原谅显而易见的问题（如果问题是这样的话）

在过去的几天里，我一直在尝试与SVG圈子合作，但这一过程非常糟糕。其目的是对齐3个SVG圆圈（一个小圆圈在页面中心，两个大圆圈在每侧）。我今天终于做到了这一点，但悬停状态行为现在表现得很奇怪（我发誓这永远不会结束）

以下是相关代码：

     <div id = "nodes">

     <!--         <object id = "about_nodes">
        <embed id = "left_about_svg" src = "resources/node-images/left-about-subnode.svg" type = "image/svg-iml"></embed>
        <embed id = "about_svg" src = "resources/node-images/about-node.svg" type = "image/svg-iml"></embed>
        <embed id = "right_about_svg" src = "resources/node-images/right-about-subnode.svg" type = "image/svg-iml"></embed>
     </object>-->

     <div id = "about_node">
         <object>
             <embed id = "about_svg" src = "resources/node-images/about-node.svg" type = "image/svg-iml"></embed>
         </object>
     </div>

     <div id = "left_about_subnode">
         <object>
             <embed id = "left_about_svg" src = "resources/node-images/left-about-subnode.svg" type = "image/svg-iml"></embed>
         </object>
     </div>

     <div id = right_about_subnode>
         <object>
             <embed id = "right_about_svg" src = "resources/node-images/right-about-subnode.svg" type = "image/svg-iml"></embed>
         </object>
     </div>

以及SVG：

<svg version="1.1" id="about_node" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="-0.531 -0.583 25.063 25.114" preserveAspectRatio="xMidYMid meet"
 style="enable-background:new -0.531 -0.583 25.063 25.114;" xml:space="preserve">

<defs>
    <style type="text/css">

    .circle{
        fill:white;
        stroke:#000000;
        stroke-miterlimit:10;}

    #about_node:hover .circle{
        fill: red;
        transition: 1s;
        stroke: red;
    }
    </style>
</defs>
<circle class = "circle" cx="12" cy="12" r="12"/>

.圆圈{
填充物：白色；
行程：#000000；
笔划斜接限制：10；}
#关于_节点：悬停.circle{
填充物：红色；
过渡：1s；
笔画：红色；
}

目前，所有3个圆圈基本上都有相同的SVG（左圆圈和右圆圈没有悬停状态），所以我将发布这一个

基本上，我发现，绝对定位会导致嵌入对象周围有一个大矩形框（当我使用检查元素时观察到）围绕我的圆（大约3个直径长）。小的居中模型左右两侧较大的模型模糊了居中模型的悬停状态

如果我：

1） 把窗口缩小一半，把我所有的圆圈粘在一起（另一个我需要解决的问题），我只需触摸小圆圈的顶端，就可以改变它的颜色

2） 拆下中心圆圈左右两侧的两个大圆圈。但是，这会将悬停状态放置在嵌入对象的大矩形上，而不是圆形本身

3） 将所有内容更改为相对定位所有内容都会出错，但圆的悬停状态正常工作，嵌入对象框变为正方形

这似乎可以归结为绝对定位。但是，我不能使用相对定位，因为我失去了可伸缩性，而且不可能定位元素（至少对我而言）

---

有人知道我做错了什么吗？天哪，我只想在一条线上画3个圆圈，带悬停功能！为什么这么难

这就是你想要的那种东西吗

HTML

<object class="svg-left"
        type="image/svg+xml" data="circle.svg"></object>
<object class="svg-middle"
        type="image/svg+xml" data="circle.svg"></object>
<object class="svg-right"
        type="image/svg+xml" data="circle.svg"></object>

SVG

<svg version="1.1" id="about_node" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="-0.531 -0.583 25.063 25.114" preserveAspectRatio="xMidYMid meet">

<defs>
    <style type="text/css">

    .circle{
        fill:white;
        stroke:#000000;
        stroke-miterlimit:10;}

    .circle:hover{
        fill: red;
        transition: 1s;
        stroke: red;
    }
    </style>
</defs>
<circle class = "circle" cx="12" cy="12" r="12"/>
</svg>

.圆圈{
填充物：白色；
行程：#000000；
笔划斜接限制：10；}
.圆圈：悬停{
填充物：红色；
过渡：1s；
笔画：红色；
}

如果没有一个有效的例子，甚至没有一幅图片，你就有点难以理解你想要实现的目标。你的宽度看起来很奇怪。65%+10%+65% > 100%. 你为什么要给你的SVG一个边界半径？另外，您的SVG是外部的有什么原因吗？对不起，这些高度和宽度值不是容器元素的百分比吗？因此，50%的宽度将占据容器水平方向的一半，50%的高度将占据容器垂直方向的50%。我想因为它是一个圆，所以我只需要一个，但我不认为它的总和必须是100%。并不是所有的浏览器都支持内嵌svg，因此支持外部svg。很抱歉没有上传图片，但是这个演示的想法是对的。你也帮我发现了一个错误。我之所以有边界半径，是因为最初悬停状态是对about_节点（“about_节点：hover.circle{…}”）的viewbox作出响应的。边界半径修正了这一点，尽管我认为这是不必要的。另外，我不喜欢使用像素，因为它不可缩放。更好地了解我想要它的方式：但是请注意，压缩的部分越多，元素就变得越古怪。也许这是预期的，我只是不知道，但我如何在不丢失圆圈的内联布局的同时保持可伸缩性？忽略该链接。如果它是一个圆，您确实需要指定高度和宽度：您受到对绝对定位每个圆的坚持的限制。当SVG中的每一个都有一个大小和位置与其他东西（页面）相关联时，您无法轻松地将它们彼此保持在相同的位置。如果您需要它们保持相对位置不变，最简单的方法是将所有圆放在同一个SVG中。也许您是对的。将它们包含在单个SVG元素中，然后将该对象放在中心位置似乎更有意义。在我发布问题之前，我已经尝试过了，但我无法实现我想要的。也许我现在在SVG工作。现在回到常规CSS形状。

.svg-left {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0px;
  top: 100px;
}

.svg-middle {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 200px;
  top: 100px;
}

.svg-right {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 300px;
  top: 100px;
}

<svg version="1.1" id="about_node" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="-0.531 -0.583 25.063 25.114" preserveAspectRatio="xMidYMid meet">

<defs>
    <style type="text/css">

    .circle{
        fill:white;
        stroke:#000000;
        stroke-miterlimit:10;}

    .circle:hover{
        fill: red;
        transition: 1s;
        stroke: red;
    }
    </style>
</defs>
<circle class = "circle" cx="12" cy="12" r="12"/>
</svg>