javascript - Accessing a DOM object defined in an external SVG file -


SVG allows standard external SVG files to be used and referenced.

I have a file circle .svg which defines a circle object with the id "the_circle", from the main SVG file, to include this cycle and animate it I am able to

I would also like to use the same circle object through javascript, how can I do this? xlink: href = "url (#the_image) # the_circle" ?

What is the JavaScript equivalent of document.getElementById ('the_image') using I can only access SVGImageElement, but the included objects inside the SVG are not defined.

  & lt ;? Xml version = "1.0" standalone = "no"? & Gt; & Lt ;! DOCTYPE svg PUBLIC "- // W3C / DTD SVG 1.1 / n" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> & Lt; Svg width = "100%" height = "100%" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http: //www.w3.Organizations / 1990 / Xlink "& gt; & Lt; Image ID = "the_image" x = "0" y = "0" width = "100%" height = "100%" xlink: href = "circle.svg" /> & Lt; AnimateTransform xlink: Repeats = "25" dur = "1s" = "25" = "url (#the_image) #the_circle" attributeName = "transform" attribute = "XML" type = "0" = "indefinite" "Additive =" " Fill = "freeze" /> gt; & lt; / svg & gt; It seems that the "right" way to do this will actually be to use one  
< P>

SVG "use" element instead of an image, the reason is that the DOM interface of the SVG access element specifies a property "instanceRoot" Which relates to the element of that experiment "Instance tree":

So, you end up with a solution that looks like the following: circle. Svg:

  & Lt ;? Xml version = "1.0" standalone = "no"? & Gt; & lt;! DOCTYPE svg PUBLIC "- // W3C / DTD SVG 1.1 / n" "http://www.w3.org/ Graphics / SVG / 1.1 / DTD / svg11.dtd "> gt; svg width =" 4in "height =" 4in "id =" the_svg "visible box =" 0 4 4 "version =" 1.1 "xmlns =" ​​http : //www.w3.org/2000/svg "& gt; & Lt; Circle r = "1" fill = "blue" stroke = "none" id = "the_circle" /> & Lt; / Svg & gt; The document that uses the svg root node of the Circle.svg:  
   & Lt; / Svg & gt; Unfortunately, however, Firefox helps in using the access element with external elements, currently there is a bug in WebKit that does not allow it:  

In addition, Firefox does not seem to like it To apply the example root for that use elements.

It seems, you may need to work around the boundaries of current SVG implementation. The way I recommend doing this, is to use XMLHttpRequest to download the document that you want to link, and import the DOM of the downloaded document into the DOM of your host document. The following code implements this, and works in Firefox, Opera, and Chromium:

  & lt ;? Xml version = "1.0" standalone = "no"? & Gt; & Lt ;! DOCTYPE svg PUBLIC "- // W3C / DTD SVG 1.1 / n" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> & Lt; Svg width = "100%" height = "100%" id = "foo" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http: // www .w3.org / 1999 / xlink "& gt; & Lt; Script & gt; FetchXML function (url, callback) {var xhr = new XMLHttpRequest (); Xhr.open ('GET', URL, true); Xhr.onreadystatechange = function (evt) {// Clearly the errors should not be handled, they should be seen through the console output in the browser. If (xhr.readyState === 4) {callback (xhr.responseXML); }}; Xhr.send (zero); }; // document fetchXML ("http: // localhost: 8082 / tmp / circle.svg" function (new SVGDIC) {// import it into current DOM var n = document.importNode (newSVGDoc.documentElement, true); Document. DocumentElement.appendChild (n); var Circle = document.getElementById ("the_circle"); // Now you have a circle}) & lt; / Script & gt; & Lt; / Svg & gt;  

Comments

Popular posts from this blog

c# - sqlDecimal to decimal clr stored procedure Unable to cast object of type 'System.Data.SqlTypes.SqlDecimal' to type 'System.IConvertible' -

Calling GetGUIThreadInfo from Outlook VBA -

Obfuscating Python code? -