web-dev-qa-db-ja.com

SVG rectの上にマウスを置く方法は？

このSVGの部分（FF 8、Safari 5.1.2、Chrome 16、すべてMac）で試しました）で、マウスをバーの上に移動すると、ブラウザーはどれも各オンマウスを適切に検出しません-over/outイベント、時々動作する場合もありますが、すべてのブラウザで一貫しているため、おそらくSVGコードに関するものです。onmouseoverとonmouseoutを使用すると、同じ結果が得られます。正しく動作しません。

SVG rectanglesのホバーに実装する正しい方法は何でしょうか？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600" version="1.1" style="display:inline">

<style type="text/css">
.bar {
    fill: none;
}
.bar:hover { 
    fill: red;
}
</style>
  <g>
   <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" />
  </g>
</svg>
csssvghover
27
milan

何が起こっているのかは、塗りつぶしが「なし」であるため、マウスイベントが検出されないことです。追加するだけです。

.bar {
    fill: none;
    pointer-events: all;
}

その後、それはうまく動作します。

54
Erik Dahlström

fill: none; pointer-event: all;は最新のブラウザのほとんどで動作するはずですが、IE9とIE10はpointer-eventsをサポートしていません。また、pointer-events: fillを設定することもできます。このfill値は SVGのみ です。つまり、fillまたはvisibilityの値は ' tは、ポインターイベントの処理に影響します。

IE9およびIE10の回避策は、fill: transparentがサポートされていない場合にCSSをpointer-eventsに設定することです（Modernizrを使用してブラウザー機能を検出できます）。

$("#rect").mouseenter(function() {
  $(this).css("fill", "teal")
}).mouseout(function(){
  $(this).css("fill","transparent")
})
#rect {
  fill: transparent;
  stroke: blue;
  stroke-width: 1px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<svg width=300 height=300>
  <rect id="rect" x=0 y=0 width=100 height=100></rect>
</svg>
5
fengshuo
.bar:hover { 
    fill: red !important;
}
4
user669677

不透明な塗りつぶしを試してください。

また、<style>は<svg>。

1
Supr