[Solved] Adjacent sibling combinator in SVG

[John A]

Does anyone know if the above work on SVG elements as I can’t get it to work on an SVG icon I’ve created.

I’ve created a zoom SVG icon comprised of a circle and two intercrossing rectangles. Have created a hover state on the circle so it changes it’s fill on mouse over which works fine apart from when the cursor goes over one of the rectangles it loses it’s hover state for some reason.

I have tried to remedy this with an adjacent sibling combinator but it isn’t working. Codepen below. Hover over the “plus icon” in the zoom controls to see what I mean.

http://codepen.io/johnasp/full/Fxjcl

[Paulie_D]

I suspect it’s because the fill of the rect is inline styling so the CSS is getting ignored.

Abstract that out then:

.plus rect {
  fill:white; /* sets the fill of the rectangles */
}

circle:hover ~ rect {
  fill:red; /* now your hover works */
}

http://codepen.io/Paulie-D/full/ImkKu/

[Paulie_D]

One point though

If you hover over the circle and then move your mouse into the white rectangle, you are no longer hovering the circle and it fails.

Ideally you should target the plus class for the hover and then use the child selector

.plus:hover circle {
/* your styles here*/
}

.plus:hover rect {
/* your styles here*/
}

EDIT: Note, this won’t work with the minus because it’s constructed a different way. but since the two ‘elements’ are effectively the same (barring one rectangle) you might want to simplify the ‘minus’ element from a path to a circle and a rect.

[John A]

Ah yes, I’d forgotten about those inline styles I’d added, they were just for test purposes.

OK, I have implemented you’re suggestions and it is all working fine, thanks man!

My online minor gripe would be I would have liked to target the circle as the hover rather than the anchor as the hover state kicks in when you are slightly outside of the circle (i.e. the border of the invisible anchor). I find the browsers behaviour a bit strange when it lost the circle hover state when over the rectangles, which we only ‘on top’ of the circle, surely I WAS still hovering over the circle? It just so happens that a couple of rectangles were on top of it. Do you know what I’m talking about here?! :-)

[Paulie_D]

surely I WAS still hovering over the circle? It just so happens that a couple of rectangles were on top of it.

I think so…but actually you weren’t hovering the circle. The rectangles act like a shield for the circle.

Imagine holding your bare hand over a candle…burns right?

Now put on a Nomex glove and do it again. Your hand, is still technically ‘hovering’ over the candle but the flame can no longer affect you.

I would have liked to target the circle as the hover rather than the anchor as the hover state kicks in when you are slightly outside of the circle

Well, you can but until we can select UP the DOM with a CSS selector you’d have to use JS/JQ.

That said, I’d have to put some thought into it but creating SVG symbols with hover states might be an option here…I’m only just getting to grips with SVG so I’d have to play a little.

[John A]

Yep, you are right, symbols appear to be the way to go with this. Check out this symbols demo I’ve just created:

http://codepen.io/johnasp/full/DhBfG

The key thing to note is the use of the “use” element for the hover. I initially tries to use the symbol and circle elements for the hover, neither worked.

[Paulie_D]

The key thing to note is the use of the “use” element for the hover. I initially tries to use the symbol and circle elements for the hover, neither worked.

Yeah…I did some more research and found that you can’t use a pseudo class on a <use>…to access the internal elements

Spec – http://www.w3.org/TR/SVG11/struct.html#UseElement

For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

[John A]

I’ve actually found a more elegant solution to this problem using <g> element after reading the article below:

The SVG <g> element is used to group SVG shapes together. Once grouped you can transform the whole group of shapes as if it was a single shape. This is an advantage compared to a nested <svg> element which cannot be the target of transformation by itself. You can also style the grouped elements, and reuse them as if they were a single element.

http://tutorials.jenkov.com/svg/g-element.html

Implemented it on my pen, no need for extra ‘use’ markup or to use ID tags on the now defunct symbol element.

[Author]

Posts