I want to use JavaScript to draw on an html5 canvas embedded in svg (in an html5 page). Drawing on "cvs" works just fine if done this way:
<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> <foreignObject x="0" y="0" width="512" height="512"> <body xmlns="http://www.w3.org/1999/xhtml"> <canvas id="cvs" width="512" height="512"></canvas> </body> </foreignObject> </svg> but not if done with the canvas in and referred to in a use tag. The drawing simply doesn't appear. Inspecting the element in Safari tells me that the the dimensions of the use element are NaN x NaN; Firebug says 0x0.
<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024"> <defs> <foreignObject id="circles" x="0" y="0" width="512" height="512"> <body xmlns="http://www.w3.org/1999/xhtml"> <canvas id="cvs" width="512" height="512"></canvas> </body> </foreignObject> </defs> <use x="0" y="0" xlink:href="#circles"></use> </svg> Is this a bug? Expected behavior? Do I just not understand how to use foreignObject (highly likely)?
1 Answers
Answers 1
You can't point to a foreignObject element directly, it says so in the SVG specification
‘svg’, ‘symbol’, ‘g’, graphics element or other ‘use’ only. So you could point to a <g> or <svg> element that had a <foreignObject> element as a child for instance.
0 comments:
Post a Comment