Open Bug 1430151 Opened 2 years ago Updated 2 years ago

SVG Element Selectors

Categories

(Developer Documentation :: SVG, enhancement)

All
Other
enhancement
Not set

Tracking

(Not tracked)

People

(Reporter: woodywalton, Unassigned)

Details

(Whiteboard: [specification][type:bug])

What did you do?
================
1. Viewed SVG demo: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS
2. Saw that it doesn't work as expected
3. Got frustrated! :)

What happened?
==============
Was troubleshooting why I could not get CSS styles and JS selectors to work in SVG content in Firefox, and came across this demo: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS - which does not work either, so there's some consolation that it's not just me!

What should have happened?
==========================
There are mouse hover events that should trigger CSS/SVG color/fill changes on the demo, but do not.

Is there anything else we should know?
======================================
Was trying to access the SVG sub-elements in my own code using JQuery, which also doesn't work.
The demo fails for me when

1) Embedded on MDN
2) As a standalone page ("View iframe in New Window")
3) On CodePen
4) On JSFiddle

on macOS with

* Safari 11.0.2
* Firefox 58.0b15 (64-bit, Developer Edition)
* Chrome 63.0.3239.132 (64-bit)
Status: UNCONFIRMED → NEW
Component: General → SVG
Ever confirmed: true
Product: Mozilla Developer Network → Developer Documentation
Hi!

This example is 100% buggy and will not work in any brother on any platform.
It relay on behaviors for the <use> element define within the SVG 1.1 specification. For various reason, Firefox never implemented that behavior and other browsers had very inconsistent implementation that have been removed.

However there is hope has it is possible to achieve the same expected result using CSS custom properties and CSS variables (which works consistently across modern browsers). See: https://codepen.io/JeremiePat/pen/KZegzo

So, from a documentation point of view, that example must be completely rewritten (and there is a high chance it will be necessary to revamp the whole SVG tutorial on MDN)
Thanks for the working example, Jeremie!  Question about that technique of overwriting the variable values via pseudo-class selectors (e.g. :hover) - is there a similar/complementary way to add CSS transitions?  For example, what if I wanted to fade in/out the colors when hovering over those circles?
And of course, as soon as I post the comment I find a working example using standard  https://codepen.io/FaridNaderi/pen/BZryKo
You need to log in before you can comment on or make changes to this bug.