CSS Hover Sometimes Doesn't Work on Svg Paths

Css hover sometimes doesn't work on svg paths

There's no fill so the interior does not catch mouse events by default and therefore hover doesn't react to that. Changing pointer-events to all will fix it in this case:

path{
    fill:none;
    stroke:black;
    pointer-events:all;
}

SVG - polygon hover does not work correclty

There is no fill to catch the pointer event so it fails.

A simple transparent fill corrects it.

polygon {  stroke-width: 1;  stroke: red;  fill: transparent;}polygon:hover {  fill: red;}

<svg viewBox="0 0 999 799">  <polygon points="445,161 345,174 500,10" />
  <polygon points="445,161 345,174 500,270" /></svg>

SVG hover not only paths but all viewbox

Move your :hover to the SVG (#icon) element as you would if working with any other HTML structure:

#icon:hover #p1 {  opacity: 0.2}#p1 {    fill:none;    stroke:black;    pointer-events:all;}

<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 48.086 48.09">  <path id="p1" d="M1.006 48.088c-.256 0-.498-.103-.68-.288-.217-.207-.324-.45-.324-.71L0 33.213c0-.523.426-.95.95-.95s.95.427.95.95l.003 11.62L18.905 27.84c.18-.18.418-.278.672-.278.254 0 .493.1.672.28.37.368.37.972 0 1.342L3.236 46.188h11.64c.523 0 .95.428.95.95s-.426.95-.95.95H1.007zM28.51 20.535c-.253 0-.492-.1-.67-.28-.37-.37-.37-.972 0-1.342L44.85 1.906H33.21c-.525 0-.95-.426-.95-.95s.425-.95.95-.95h13.87c.256 0 .498.103.68.29.217.208.324.45.324.71l.002 13.873c0 .523-.426.95-.95.95s-.95-.426-.95-.95l-.002-11.62-17 16.997c-.18.18-.42.278-.673.278zM19.58 20.525c-.253 0-.492-.1-.67-.28L1.9 3.236 1.9 14.876c0 .525-.426.95-.95.95S0 15.4 0 14.876l.002-13.87c0-.257.104-.5.29-.68C.5.107.743 0 1.003 0L14.876 0c.524 0 .95.426.95.95s-.426.95-.95.95l-11.62.002 16.997 17c.37.372.37.975 0 1.345-.18.18-.42.278-.672.278zM33.21 48.086c-.524 0-.95-.427-.95-.95 0-.254.098-.492.277-.672.18-.18.418-.277.672-.278l11.62-.003L27.833 29.18c-.37-.37-.37-.973 0-1.343.18-.18.418-.278.67-.278.255 0 .494.098.673.277L46.183 44.85V33.207c0-.523.426-.95.95-.95s.95.427.95.95v13.87c0 .26-.105.5-.293.683-.207.216-.45.322-.71.322l-13.87.004z"/></svg>

Svg:hover on two paths at once

You could use the selector svg:hover path and change the color of the paths when hovering over the parent, svg element:

Updated Example

svg:hover path {
    fill: rgb(230, 100, 100);
}

---

As Duopixel mentions below, if you have mutliple paths within the svg, you can wrap the desired paths in order to target them.

Example Here

For instance:

svg .arrows:hover path {
    fill: rgb(230, 100, 100);
}

<g class="arrows">
    <g>
        <g>
            <path fill="#C8C7C7" d="M7.333,22.42c10.167,6.531,20.333,13.063,30.5,19.596
        c-0.533-0.343,0.075-6.82,0.075-7.5c0-0.76,0.607-7.062-0.075-7.5C27.666,20.484,17.5,13.952,7.333,7.42
        c0.533,0.343-0.075,6.821-0.075,7.5C7.258,15.679,6.651,21.98,7.333,22.42L7.333,22.42z" />
        </g>
    </g>
    <g>
        <g>
            <path fill="#C8C7C7" d="M67.667,7.419c-10.167,6.532-20.333,13.063-30.5,19.595c-0.682,0.438-0.075,6.74-0.075,7.5
        c0,0.68,0.608,7.157,0.075,7.5c10.167-6.531,20.333-13.063,30.5-19.595c0.683-0.438,0.075-6.741,0.075-7.5
        C67.742,14.24,67.134,7.762,67.667,7.419L67.667,7.419z" />
        </g>
    </g>
</g>

How do I get my SVG to animate on mouse hover using css or javascript?

Hover won't always work on an svg path. A better method might be to add your hover to the svg itself.

svg:hover .outline-fill {
  animation-play-state: running;
}

Hover events for a dashed line in an SVG

This can be solved somewhat by using a rect instead of line and using SVG transforms with patterns.

An example can be seen at this CodePen.

It essentially bubbles down to:

<svg height="210" width="500">
    <defs>
        <pattern id="pattern1"
                width="10" height="10"
                patternUnits="userSpaceOnUse"
                patternTransform="rotate(0 60 60)">
        <line stroke="green" stroke-width="12px" y2="10"/>
        </pattern>
        <pattern id="pattern2"
                width="10" height="10"
                patternUnits="userSpaceOnUse"
                patternTransform="rotate(0 60 60)">
        <line stroke="red" stroke-width="12px" y2="10" stroke="transparent"/>
        </pattern>
    </defs>
    <g transform="rotate(45 60 60)">
        <rect x="0" y="0" width="500" height="5"/>
    </g>
</svg>

And the following CSS:

rect {
    fill: url(#pattern1)
}
    rect:hover {
    fill: url(#pattern2)
}

---

Related Topics