Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Huy Nguyen
    @chutichhuy
    yes, new browser wont do that, old browser need a polyfile for registerElement, which underneath still use requestAnimationFrame i think
    Jake Wilson
    @Jakobud
    okay
    Huy Nguyen
    @chutichhuy
    the scanning job isnt a heavy job
    Jake Wilson
    @Jakobud
    okay
    with registerElement do you still need to scan the dom?
    or is there simply some sort of "onCreate" handler for the element that you would use whenever one is created
    or modified
    Huy Nguyen
    @chutichhuy
    sorry for typos, typing on fone in a bar
    yes, but if a modern browser does support it natively, I think it knows when to call oncreate, so no scanning at all
    Jake Wilson
    @Jakobud
    Hmm that is an interesting approach
    Huy Nguyen
    @chutichhuy
    what are using the polyfill for
    *what are you using the polyfill for
    Jake Wilson
    @Jakobud
    for this website http://ps2maps.com
    still making changes in the dev environment
    but essentially, I have a SVG sprite with all my svgs as <symbol>s in it
    I haven't pushed the polyfill to the site yet though
    I haven't pushed the polyfill to the site yet though
    and the polyfill injects the code into the page directly, which allows me to easily alter each SVG via CSS
    By the way, I just read this article today http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
    I'm not sure how cross browser friendly it is though so I need to research it
    She explains a way that you can style svg's when using <use>
    Huy Nguyen
    @chutichhuy
    wow interesting
    let me read it
    Jake Wilson
    @Jakobud
    Also don't forget to take a look at this: http://caniuse.com/#search=registerelement
    the registerElement isn't very widely supported quite yet. Just something to be aware of.
    Also have you looked into using MutationObserver instead of the scanner: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
    I have never messed with it but its interesting
    Huy Nguyen
    @chutichhuy
    thanks for the links
    i'll have a look
    the registerElement polyfill i'm using is a popular polyfill
    i'm not sure what it's using underneath
    i'll have a deeper look at its code
    Jake Wilson
    @Jakobud
    Take a look at my pen http://codepen.io/jakobud/pen/dojMJX
    using that fill: inherit allows you to style the elements in an SVG <use>. Does this eliminate the need for your polyfill to copy the symbol into the svg elements all over the DOM?
    Jake Wilson
    @Jakobud
    I think injecting the sprite svg into the document is still important though
    Huy Nguyen
    @chutichhuy
    hi
    i had a talk with another guy in our team
    we think her approach is not suitable for a big system, but something small and adhoc
    svg * {all: inherit}
    simply that make our icons look weird
    i think it's cool if you only have a few icons and know what you're doing
    Huy Nguyen
    @chutichhuy
    https://github.com/frexy/svg-sprite-generator our new sprite generator by the way
    it's a command line tool
    hope it helps
    Jake Wilson
    @Jakobud
    Cool script. I've been using gulp-svgstore for this
    Huy Nguyen
    @chutichhuy
    yes, just another option
    Jake Wilson
    @Jakobud
    Actually I was wrong, you cannot style individual elements in the SVG when using <use>.
    You have to target the entire SVG or none at all
    So you do still need the polyfill to replace the <use> with the actual SVG symbol markup as your polyfill does