Good place to be asking non FF SVG questions?

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

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
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Good place to be asking non FF SVG questions?

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

2017-08-30 20:55 GMT+02:00 Pete d'Oronzio <[hidden email]>:

> 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
> _______________________________________________
> dev-tech-svg mailing list
> [hidden email]
> https://lists.mozilla.org/listinfo/dev-tech-svg
>



--
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Good place to be asking non FF SVG questions?

Pete d'Oronzio
In reply to this post by 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 <[hidden email]>:
>
> > 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
> > _______________________________________________
> > dev-tech-svg mailing list
> > [hidden email]
> > https://lists.mozilla.org/listinfo/dev-tech-svg
> >

_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Good place to be asking non FF SVG questions?

Jeremie Patonnier
2017-08-31 1:38 GMT+02:00 Pete d'Oronzio <[hidden email]>:

> 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,
--
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>
_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Good place to be asking non FF SVG questions?

Pete d'Oronzio
In reply to this post by 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


Jeremie Patonnier wrote:

> 2017-08-31 1:38 GMT+02:00 Pete d'Oronzio <[hidden email]>:
>
> > 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,

_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Good place to be asking non FF SVG questions?

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 wrote:

> 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
>
>
> Jeremie Patonnier wrote:
>
> > 2017-08-31 1:38 GMT+02:00 Pete d'Oronzio <[hidden email]>:
> >
> > > 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,

_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg
Reply | Threaded
Open this post in threaded view
|

Re: Good place to be asking non FF SVG questions?

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.
Thanks!
Pete

Pete d'Oronzio wrote:

> 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 wrote:
>
> > 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
> >
> >
> > Jeremie Patonnier wrote:
> >
> > > 2017-08-31 1:38 GMT+02:00 Pete d'Oronzio <[hidden email]>:
> > >
> > > > 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,

_______________________________________________
dev-tech-svg mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-svg