search

jonathantneal / svg4everybody

Use external SVG spritemaps today
https://jonneal.dev/svg4everybody/
Other
3.29k stars 353 forks source link

Properties in use tags are not applied to embedded elements #145

Open BenDTU opened 7 years ago

BenDTU commented 7 years ago

We're using 'use' within an SVG, but we're finding that when an element is embedded the properties applied to the use (x, y, style, etc.) aren't being applied to the embedded element. We are resusing definitions and applying new coordinates and colours that are then being stripped.

BenDTU commented 7 years ago

A good demo of this is available at http://codepen.io/petebarr/pen/e84411ac73fbda10028d20ee0032ea9c thanks to @petebarr

petebarr commented 7 years ago

Strangely this is not actually happening in my actual dev version within the context of the entire page being developed. The entire contents of the 'use' are not in the DOM at all. It's only happening like you mention in my Codepen. In the Codepen instance wrapping the 'use' in a group with the same attributes may work.

petebarr commented 7 years ago

Sorry, it looks like svgo in my gulp tasks is stripping out the defs and ID's so there is no reference for the use tags, hence not being appended to the bottom. Not sure which plugin I need to use to prevent this, but obviously not relevant to this issue.

Eschon commented 7 years ago

I have the same issue. #122 should fix it.

timeiscoffee commented 7 years ago

@Eschon that PR is a little outdated now... I actually have a similar fix ready on my local, I'll put it up for PR soon.

timeiscoffee commented 7 years ago

@Eschon @BenDTU https://github.com/jonathantneal/svg4everybody/pull/152 has been created, encompassing https://github.com/jonathantneal/svg4everybody/pull/122 and https://github.com/jonathantneal/svg4everybody/pull/113. Could you guys review and possibly test if you have time? Thanks!

Eschon commented 7 years ago

Thanks for this PR! I just tried it out and found a few small problems. I left them in a comment over there.