Here are 4 different ways you can try:
<object data="rectspercent.svg" type="image/svg+xml"
width="100" height="100">
</object>
<embed src="rectspercent.svg"
width="100" height="100" type="image/svg+xml"/> <iframe
src="rectspercent.svg" type="image/svg+xml" width="100" height="100"
frameborder="0"></iframe>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
<defs>
<g id="squares">
<rect x="0" y="0" height="100%" width="100%" fill="#900" />
<rect x="1%" y="1%" height="98%" width="98%" fill="#f00" />
<rect x="2%" y="2%" height="96%" width="96%" fill="#800" />
<rect x="3%" y="3%" height="94%" width="94%" fill="#e00" />
<rect x="4%" y="4%" height="92%" width="92%" fill="#700" />
<rect x="5%" y="5%" height="90%" width="90%" fill="#d00" />
<rect x="6%" y="6%" height="88%" width="88%" fill="#600" />
<rect x="7%" y="7%" height="86%" width="86%" fill="#c00" />
<rect x="8%" y="8%" height="84%" width="84%" fill="#500" />
<rect x="9%" y="9%" height="82%" width="82%" fill="#b00" />
<rect x="10%" y="10%" height="80%" width="80%" fill="#400" />
<rect x="11%" y="11%" height="78%" width="78%" fill="#a00" />
<rect x="12%" y="12%" height="76%" width="76%" fill="#300" />
<rect x="13%" y="13%" height="74%" width="74%" fill="#900" />
<rect x="14%" y="14%" height="72%" width="72%" fill="#200" />
<rect x="15%" y="15%" height="70%" width="70%" fill="#800" />
<rect x="16%" y="16%" height="68%" width="68%" fill="#100" />
<rect x="17%" y="17%" height="66%" width="66%" fill="#700" />
<rect x="18%" y="18%" height="64%" width="64%" fill="#000" />
</g>
</defs>
<use xlink:href="#squares" x="0" y="0" opacity="1" transform="scale(1)"/>
</svg>
----- Original Message -----
From: "Diana" <[email protected]>
To: [email protected]
Sent: Wednesday, February 22, 2012 8:01:13 PM
Subject: [svg-developers] access svg elements from HTML5
Hello all,
I am very new to svg. I am trying to access an element (defined by id) in a svg
file from HTML5, using jquery if possible, but it's not successful. Here is
part of the code:
*******************************
svg definition:
<svg version="1.1" id="Layer_1"
xmlns=" http://www.w3.org/2000/svg " xmlns:xlink=" http://www.w3.org/1999/xlink
" x="0px" y="0px" width="100%" height="100%"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path id="dial" fill="#F7941E"
d="M89.944,50c0-22.091-17.908-40-40-40c-22.092,0-40,17.909-40,40c0,22.092,17.908,40,40,40V50
H89.944z"/>
</svg>
In HTML
<embed src='dial.svg' type='image/svg+xml' id="dialSvg"/>
// the following code is from online reading
var a = document.getElementById("dialSvg"); // this line is okay, the result is
HTMLEmbedElement
var svgDoc = a.contentDocument; // but contentDocument is not even defined in
HTMLEmbedElement
var d = svgDoc.getElementById("dial");
******************************************
Any help is greatly appreciated.
Thanks
Diana
------------------------------------
-----
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/
