Hi James, I'll try to explain it again then, no problems. If you need the DOM nodes for custom styling and content modification, basically the power of making each instance look different and actually be independent objects, then XSLT is one option, that or just copy-pasting the markup you need.
Your example could be rewritten like this (note the slight difference in how the fill colors are set): <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 1920 1080" preserveAspectRatio="none" xml:space="preserve"> <defs> <path id="go_fill" d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/> </defs> <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer"> <use xlink:href="#go_fill" fill="#B8CBFF" onmouseover="this.setAttribute('fill', '#3DFF3D');" onmouseout="this.setAttribute('fill','#B8CBFF');" onclick="this.setAttribute('fill', '#B8CBFF');"/> </g> </svg> This will set the fill on the <use> element instead of trying to set the fill on the element the <use> points to, if you wanted you could also do something like 'onmouseover="this.currentTarget.setAttribute(...)"'. Both ways should work just fine in all browsers. Another alternative is to set the colors with CSS, like this: <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 1920 1080" preserveAspectRatio="none" xml:space="preserve"> <defs> <path id="go_fill" d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/> <style> use:hover { fill: #3DFF3D; } use:active { fill: purple; } /* picked another color to show that clicked state is different */ </style> </defs> <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer"> <use xlink:href="#go_fill" fill="#B8CBFF" /> </g> </svg> Again, that should work fine everywhere. Firefox is incorrect in letting your original example work, to understand why you can inspect the value of 'evt.target' in the onmouseover attribute for example. Here's a simple example, click the arrow and compare the result in the various browsers: <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 1920 1080" preserveAspectRatio="none" xml:space="preserve"> <defs> <path id="go_fill" d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/> <style> use:hover { fill: #3DFF3D; } use:active { fill: purple; } </style> </defs> <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer"> <use xlink:href="#go_fill" fill="#B8CBFF" onclick="alert('evt.target (the element that was the original target of the event): ' + evt.target + '\nevt.currentTarget (the element currently handling the event, since it may have bubbled): ' + evt.currentTarget)"/> </g> </svg> Hope this helps /Erik On Thu, 18 Oct 2012 20:40:50 +0200, jamesd <[email protected]> wrote: > Thank you Eric, I think? I am just a simple user of SVG, you're > explanation goes over my head. I have a piece of path data with > id="go_fill" in the <defs> with no styling. > > Are you saying that the specs do not allow me to style this data on > demand? This to me would make no sense in real world SVG usage. I would > think that there would, or should, be a way to accomplish this. > > Below is a test demo of the data and its usage. As I said it works > wonderfully in Firefox, should it not? Either yes or no would be > something I can understand. > > James > > > <svg xmlns="http://www.w3.org/2000/svg"; > xmlns:xlink="http://www.w3.org/1999/xlink"; > xmlns:ev="http://www.w3.org/2001/xml-events"; x="0px" y="0px" > width="100%" height="100%" viewBox="0 0 1920 1080" > preserveAspectRatio="none" xml:space="preserve"> > > <defs> > > <path id="go_fill" > d="M50.06,238.925v-55.168H7.2V73.424h42.86V18.259l103.029,110.33L50.06,238.925z"/> > > </defs> > > <g id="next" transform="matrix(2 0 0 2 800 250)" cursor="pointer"> > > <use xlink:href="#go_fill" fill="#B8CBFF" > onmouseover="evt.target.setAttribute('fill', '#3DFF3D');" > onmouseout="evt.target.setAttribute('fill','#B8CBFF');" > onclick="evt.target.setAttribute('fill', '#B8CBFF');"/> > > </g> > > </svg> > > > --- In [email protected], "Erik Dahlstrom" <ed@...> wrote: > >> When you hover the <use> what you're actually hovering is an instance of >> the subtree it points to (referred to as the "template" from here on). >> Firefox does a full actual clone of that subtree and inserts it as a >> child >> of the <use>, while the spec calls for "conceptual cloning", and is >> quite >> clear on the point that the event target should be SVGElementInstance >> objects - see https://bugzilla.mozilla.org/show_bug.cgi?id=265895. The >> SVGElementInstance interface doesn't inherit the Element interface, and >> therefore has no setAttribute method. You can fetch the template Nodes >> if >> you want (SVGElementInstanec.correspondingElement [1]) if you want to >> modify the template elements. >> >> You can't change the fill on just one of the instances, either you >> modify >> the template (doing so will affect all instances) or you modify the >> style >> on the <use> element itself and use e.g fill="currentColor" where >> necessary in the template. If you have a need to change the fill per >> instance then you should just clone the tree manually instead, and not >> use >> <use>. >> >> >> [1] >> http://www.w3.org/TR/SVG11/struct.html#__svg__SVGElementInstance__correspondingElement >> >> -- >> Erik Dahlstrom, Core Technology Developer, Opera Software >> Co-Chair, W3C SVG Working Group >> Personal blog: http://my.opera.com/macdev_ed >> > > -- Erik Dahlstrom, Core Technology Developer, Opera Software Co-Chair, W3C SVG Working Group Personal blog: http://my.opera.com/macdev_ed ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
