Good place to be asking non FF SVG questions?

[Pete d'Oronzio]

Hi there,

I've got a bunch of JS + CSS + SVG that I built and tested in FF over
the past few days. I had already tested the basic display in other
browsers, but have now found that some of the CSS code doesn't work the
same in *any* other browser. I'm hoping to find a group where this sort
of thing is discussed.

For the curious, my problem is that I styled my <g> elements to
"highlight" all of their elements using a hover style. It turns out
that the <g> element is just a container and other browsers don't
distribute the style to its children. So now I need to search for a
means of highlighting a group of graphics when any one of them is
hovered over.

Thanks!
Pete

[Jeremie Patonnier]

Hi Pete

It's unclear what you try to achieve, do you have some code sample
somewhere so that we can discuss on top of something concrete?

Best,
Jeremie

> _______________________________________________
> dev-tech-svg mailing list
> dev-te...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-tech-svg
>



--
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>

[Pete d'Oronzio]

Hi Jeremie,

Thanks for your quick response.

My main goal is to find some newgroup or other forum where asking
questions like "which browsers will work for x, and which don't", or
"why doesn't this work in Edge" is acceptable. I would imagine that
asking that here would result in a response like "this group is for FF".

Since you asked about today's specific problem, I created a simplified
version of my project:
http://util.governmenttools.com/test/SVGDiagram/Sample1.html

You'll note that there are graphic symbols assembled from polylines and
some text. They are each grouped in a <g> that includes a pdid CRASH
number. It is my goal to be able to hover over any part of the symbol
or text and have the entire graphic highlight. Separately, I will need
to create code that allows for a click on any part to identify the
parent, and therefore the CRASH number. I think I can handle the
latter.

Thanks again for your interest.

Jeremie Patonnier wrote:

> Hi Pete
>
> It's unclear what you try to achieve, do you have some code sample
> somewhere so that we can discuss on top of something concrete?
>
> Best,
> Jeremie
>
> 2017-08-30 20:55 GMT+02:00 Pete d'Oronzio <pe...@pdmagic.com>:
>
> > Hi there,
> >
> > I've got a bunch of JS + CSS + SVG that I built and tested in FF
> > over the past few days. I had already tested the basic display in
> > other browsers, but have now found that some of the CSS code

> > doesn't work the same in any other browser. I'm hoping to find a

[Jeremie Patonnier]

2017-08-31 1:38 GMT+02:00 Pete d'Oronzio <pe...@pdmagic.com>:

> My main goal is to find some newgroup or other forum where asking
> questions like "which browsers will work for x, and which don't", or
> "why doesn't this work in Edge" is acceptable. I would imagine that
> asking that here would result in a response like "this group is for FF".
>

Definitely a good place to discuss spec implementation inconsistencies…
especially within Firefox ;)

> Since you asked about today's specific problem, I created a simplified
> version of my project:
> http://util.governmenttools.com/test/SVGDiagram/Sample1.html

Thanks, it make things a bit easier to understand. That example is still
somewhat heavy but it is enough to speculate that there is something wrong
with your code at some point.

I did a quick experiment about hovering a <g> element to have css rules
applied to children and it works fine in all browsers I've been able to
test with (namely: Firefox, Chrome and Safari):

- https://jsfiddle.net/JeremiePat/3j0thakv/

Based on that and as it seams to match your use case, I suggest that you
spend some time in your code to try to spot in what way is your code
handling that to see what makes Chrome behave differently than Firefox as
they shouldn't in that case of hovering g elements. My suggestion is to
take the example you provide and try removing things one at the time until
the hovering behavior occurs in at least 2 browsers, meaning the last piece
you removed is likely the cause of that different behavior.

Best,

[Pete d'Oronzio]

I'm on it. Thank you Jeremie.
And yeah... sorry for the "heavy" example... My app kicks out the code
and I stripped out a lot of it, but moving forward I'll create
something cleaner if I need to post more
I'll let you know what I find. I was really about to give up on this
piece, so I really appreciate that you took the time to check it out.
Pete

[Pete d'Oronzio]

I found the problem.

It turns out I wasn't considering inheritance priority of CSS
functionality.

I had specified a class name of "dispSymbol" and "hitSymbol" for the
child polylines. When I attempted to change the properties for
"highlight:hover" (the surrounding <g>) they could not override the
polyline properties which had their own styles. (the inner styles have
higher priority)

I can manipulate the polylines directly, but cannot style the <g> and
cause it to affect all the children. Now I'm trying to figure out how
I can style the children, using their parent, when the children already
have styles assigned.

Here is a "lighter weight" example:
https://jsfiddle.net/PdProg/opk3s36h/

Thanks!
Pete

[Pete d'Oronzio]

Aack. Horrible description. Please disregard my prior post.

I'm going to work on a better sample. The gist of what I'm looking for
is to be able to hover over any of the many items in the <g> and have
them all highlight together. This doesn't appear possible when each of
them is styled individually.

I'll ponder this myself for a bit.