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

Question

首先，我是前端编码的新手，所以请原谅显而易见的问题（如果问题是这样的话）。

在过去的几天里，我一直在尝试使用 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>

如您所见，有一些被注释掉的 HTML。我正在试验不同级别的容器，看看这是否是问题所在。不是。

CSS：

#about_svg{
display: inline;
position: absolute;
width: 10%;
height: 10%;
left: 50%;
margin-top: 2%;
-moz-transform: translateX(-50%);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
}

#left_about_svg{
display: inline;
position: absolute;
width: 65%;
height: 65%;
left: 25%;
top: 3%;
-moz-transform: translateX(-50%);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
}

#right_about_svg{
display: inline;
position: absolute;
width: 65%;
height: 65%;
left: 75%;
top: 3%;
-moz-transform: translateX(-50%);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
}

还有 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"/>

目前所有 3 个圆圈的 SVG 基本相同（左右圆圈没有悬停状态）所以我只发布这个。

基本上，我发现绝对定位会导致我的嵌入对象在我的圆圈周围有一个大的矩形框（当我使用inspect element时观察到） （大约 3 个直径长）。小居中的左侧和右侧的较大的遮挡了居中的悬停状态。

如果我满足以下条件，则悬停状态有效：

1) 将我的所有圆圈混合在一起，将窗口缩小一半（我需要解决的另一个问题），我可以触摸小圆圈的尖端并改变它的颜色。

2) 去掉中间的左右两个大圆圈。但是，这会将悬停状态置于嵌入对象的大矩形上，而不是圆形本身。

3) 将所有内容更改为相对定位，所有内容都搞砸了，但圆圈的悬停状态正常工作，嵌入对象框变为正方形

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

有谁知道我做错了什么？天哪，我只想要三个具有悬停功能的圆圈！为什么这么难！？

Answer 1

这是你追求的那种东西吗？

Plunker demo

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>

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

<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>