異なる位置を使用しているときにSVGサークルのホバー状態が一貫しない

Question

まず最初に、フロントエンドコーディングに新しいので、明らかに問題があれば言い訳をします。

私は過去数日間、SVGサークルで作業しようとしていましたが、そのためにはひどい時がありました。その目的は、3つのSVGサークル（ページの中央に小さいものと、それぞれの2つの大きなもの）を整列させることでした。私は結局これを今日達成しましたが、ホバー状態の動作は変な動作をしています（私はこれが決して終わらないと誓っています）。あなたには、いくつかのコメントアウトHTMLがあります見ることができるように

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

：ここ

は、関連するコードです。私はそれが問題かどうかを確認するために、さまざまなレベルの容器を試していました。そうではありませんでした。

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（左右の円を持っていませんホバー状態）私はちょうどこれを投稿します。

基本的に、私は考え出したことは、それが私の円（約3直径長）の周囲（I素子を検査を使用した場合に観察された）のまわりで私の埋め込みオブジェクトを引き起こす絶対配置が大きい長方形の箱を持っていることです。小さな中央の小さなものの左右の大きなものは、中心のもののホバー状態を不明瞭にしています。私があればホバー状態が動作

：

1））（一緒にサークルのすべてをmushing半分に私は修正する必要がある別の問題を、ウィンドウを縮小、私は小さな円の先端に触れることができますよその色を変更します。

2）中央の2つの大きな円を左右に外します。しかし、これは、円ではなく埋め込みオブジェクトの大きな矩形にホバー状態を置きます。

3）相対的な位置決めすべてにすべてを変えるには、めちゃくちゃますが、サークルのホバー状態が正常に動作して埋め込みオブジェクトボックスは、これは絶対位置に煮詰めるようだ平方

になります。しかし、私はスケーラビリティを失うので、私は相対的な使用することはできません（少なくとも私のために）要素を配置することは不可能です。

誰かが間違っていることを知っていますか？キリスト私はちょうどホバリング能力を備えたラインで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>