How to Hover Over an Svg Rect

How to hover over an SVG rect?

What's happening is that the mouse events are not detected because the fill is 'none', just add:

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

Then it works just fine.

How to add an SVG hover event for text on a rectangle?

set the text to be pointer-events: none;

<svg viewBox="0 0 100 100">
  <defs>
    <style>
      .slip {
        fill: blue;
      }
      .st {
        fill: white;
        pointer-events: none;
      }
      .slip:hover {
        cursor: pointer;
        -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
      }
    </style>
  </defs>
  <g id="slips">
    <rect class="slip" x="10" y="10" width="80" height="50"/>
    <text class="st" x="20" y="30">1000</text>
  </g>
</svg>

How to apply :hover on SVG inner rect element?

Just use:

#rec1:hover + #rec2 {
     display: block;                 
}

The + selector is used for selecting siblings (children of the same element -- g in this case), which is the case here.

Hope that helped!

SVG element hovering to cause other SVG elements change

your class name of lower_element is wrong in css. also try this:

html:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g class="top">
    <rect x="149" y="100"  width="96.4" height="96.3"/>
  </g>
  <g class="lower_element">
    <rect x="19" y="19" width="35" height="15" />
    <rect x="36" y="36" width="36.75" height="15"  />
  </g>  
</svg>

css:

svg {
  height: 220px;
  width: 400px;
  background: grey;
}

.lower_element {
  fill: white;
  transform-origin: center;
  transition-duration: 0.1s;
}

.top {
  fill: blue;
  transform-origin: center;
  transition-duration: 0.1s;
}

.top:hover + .lower_element {
  fill: red;
}

Display Text Over SVG Element On Hover

Something like this? You can use g to group elements.

svg text {display: none;}

svg g:hover text {display: block;}

<svg width="511" height="15">

    <rect fill="#555555" height="15" stroke="#000000" width="510"></rect>

    <g>

      <rect class="bar" x="2" y="2" width="434" height="11" fill="#97C115" data-label="Test-Label"></rect>

      <text x="0" y="15">Label 1</text>

    </g>

</svg>

Mouseover on rect borders

You can use the pointer-events property to only invoke the mouseover effect on a stroke. You'd want pointer-events="visibleStroke" or possibly pointer-events="stroke"

If you couple this with a dart onmouseover handler...

element.onMouseOver.listen( (event) {
  print('onMouseOver!');
} );

That should give you what you want. If you want to do separate top/bottom/left/right handling you'd either have to work out where the hover is using the event co-ordinates or have separate rects for the different sides.

---

Related Topics