- From: Cameron McCormack <cam@mcc.id.au>
- Date: Wed, 16 Feb 2011 17:26:49 +1300
- To: Tavmjong Bah <tavmjong@free.fr>
- Cc: public-svg-wg@w3.org
Tavmjong Bah: > 1. I have a simple button I wish to reuse multiple times to reference > external web pages. How can I provide a PNG backup for browsers that > don't support SVG? The following does not work: > > <a href="http://www.w3.org/Graphics/SVG/"> > <object type="image/svg+xml" data="buttonA.svg"> > <img src="buttonA.png" alt="A sample button."/> > </object> > </a> > > From what I understand, using an SVG this way creates a "nested > browsing context" so that a button click on the SVG never reaches > the <a> tag in the HTML. Right. Events won’t bubble up out of the SVG document into the HTML document. SVG as an image would work to trigger the link, but wouldn’t let you provide a PNG fallback: <a href="http://www.w3.org/Graphics/SVG/"> <img src="buttonA.svg"> </a> although you *could* catch the error event that should be fired at the <img> and then change its src to be the PNG: <a href="http://www.w3.org/Graphics/SVG/"> <img src="buttonA.svg" onerror="this.removeAttribute('onerror'); this.src = 'buttonA.png'"> </a> Seems a bit hacky, though! It might be easier to use a JavaScript library to help with fallback, like Modernizr: <script src="modernizr.js"></script> <style> html.svg .png-fallback { display: none } html.no-svg .svg-image { display: none } </style> <a href="http://www.w3.org/Graphics/SVG/"> <img class="svg-image" src="buttonA.svg"> <img class="png-fallback" src="buttonA.png"> </a> > 2. How can I style an externally referenced SVG from HTML? I want > to do something like: > > <img src="buttonB.svg" alt="xxx" style="color: orange"/> Currently, you can’t. The SVG document created for the image rendering does not inherit styles from the referencing HTML document. > Using inlined SVG, styling can be made to work: > > svg.Orange { > color: orange; > } > ... > <svg class="Orange" ... > > <use xlink:href="buttonB.svg#Root"/> > </svg> > > SVG 1.1F2, section 11.2 says that "currentColor" is suppose to > allow styling of SVG from HTML. How does this actually work? Well, this would work if you have inline SVG. Then, the color property would be inherited into the SVG content, and you could use currentColor to reference the color property’s current value in fill or stroke. > Speaking of "color" and "currentColor", can these be used > to work around the "matching arrowhead to path" color problem > (I'll send another email about that)? No, because the inheritance of properties comes from the <marker> element’s parent, rather than the element that is referencing the marker. (But yes: markers need an overhaul to fix this problem.) > Bonus questions: > > 1. How can I give external SVG buttons different text from HTML? Do I > need to resort to JavaScript? Currently, yes. Doug’s Parameters spec would support this, and has this button-with-different-text as a specific use case. > 2. Inside an SVG file, how can I reuse a button via <use> as different > browsers return different values for event.target (Firefox: > SVGUseElement, others: SVGElementInstance)? For those implementations that do have SVGElementInstances, do they bubble the event up to the <use> element? If so, then just put event listeners on the <use>. If not, then you might be good if you can look at the correspondingUseElement property. Otherwise, I guess the information you want isn’t there… -- Cameron McCormack ≝ http://mcc.id.au/
Received on Wednesday, 16 February 2011 04:27:28 UTC