What is the meaning of this?
.append("svg:svg")
I saw it in HTML and in D3 code. Does it add plugin of SVG?
In XHTML code, one can use namespaces to distinguish other XML-based languages included in the webpage. Here, the namespace "svg" is used before the tag "svg".
namespace:tagname
This can be useful in case two tags (for example, in XHTML and SVG) have the same name and you want to exactly specify which one you refer to. The tags can be specified with the xmlns attribute. As you know, XHTML documents start with
<html xmlns="http://www.w3.org/1999/xhtml">
you may specify the prefix as
<html xmlns:prefix="http://www.w3.org/1999/xhtml">
and then you'll use
<prefix:head>
<prefix:title></prefix:title>
</prefix:head>
Similarily you can use
<svg xmlns="http://www.w3.org/2000/svg">
instead of just <svg> when including your svg graphic. Then all svg tags will start with the svgprefix prefix. However if you have child SVG nodes, they will also need this xmlns attribute to be defined. In such a case, defining the prefix will probably be easier.
From the documentation for D3.js's append() method:
The element's tag name may have a namespace prefix, such as "svg:text" to create a "text" element in the SVG namespace. By default, D3 supports svg, xhtml, xlink, xml and xmlns namespaces. Additional namespaces can be registered by adding to d3.ns.prefix.
Note in particular that the namespace prefixes in D3.js are not based on your document, but a predefined map of common prefixes to the actual namespace URL.
Namespaces are the way an XML document (which includes XHTML but not HTML) can include two attributes or elements with the same name (e.g. "sin" as in mathematical sine calculation vs. "sin" as in moral failing) without conflict. Putting an <svg> element in an XHTML document has no meaning unless that SVG element is in the SVG namespace.
For more information, read Namespaces in XML.
Related
Every Node instance has a baseURI property.
Node instances of ELEMENT_NODE type maintain namespaceURI property.
What are the significance of these two properties for a browser to manage the nodes in DOM?
The namespaceURI is the namespace of the element. So for non-foreign elements in the HTML serialisation, that's http://www.w3.org/1999/xhtml.
The Base URL of a node is, in principal, akin to the <base> element in HTML. That element only sets the base URL for the document. But in XML, a base can be set on any element such that it applies to the xlink:href attributes of its descendent elements, via the xml:base attribute. The XML Base spec describes this. Again, in principal, this should apply to XHTML documents (properly served as application/xhtml+xml of course), for example <a> elements in the svg namespace. However, a quick test shows that in fact, while Firefox supports this correctly, Chrome and IE do not.
I am trying to give the user an ability to manually edit an SVG document.
Is there a strait forward way to use DOM to extract all the elements from an SVG document and place it in a text box? I tried to use innerHTML but that didn't work (not available for SVG).
Is there a method within JavaScript to extract all SVG elements from an embedded SVG document and store them as a string? I don't want to use jQuery or plugin if I can avoid it..
Sorry for my wording, my english is very poor.
You can use XMLSerializer to do this.
var str = new XMLSerializer().serializeToString(svgDocument);
If you have an <object> tag that references the svg, your svgDocument variable should be set to something like yourObjectElm.contentDocument. If the svg is inline in the html, then you can pass the element(s) instead of the document.
I'm writing a plugin for a bigger application which is in HTML5.
The plugin contains a svg which displays relations. I would like to add linearGradients to the svg, but that doesn't quite work because the output tags are in lower cases 'lineargradient' instead of 'linearGradient'. I already tried to add the namespace to the svg element, but that didn't help.
Also created an extra document object with svg Doctype and namespace. The tags were now correct, but in that way I won't get the linearGradient object to the plugin in the html5 document object.
The problem seems to be the document.createElement function, which is called when creating a linearGradient object. It formats the tag to lowercase if the tag is not in the namespace
Is there any way to create a working linearGradient?
Edit:
I also tried to use document.importNode and document.adoptNode to import/adopt a node that I created with a SVG Document, but they seem to use the createElement function, as the important tag 'linearGradient' ist still written lowercase and though not working.
In the w3school site there are two tutorials:
HTML DOM
XML DOM
I want to know the releationship of them, since I think the HTML DOM is one kind of XML DOM.
So the methods/properties in the XML DOM can be used in HTML DOM, and the HTML DOM may own some special methods.
However, when I try to use this:
HTML:
<span id="con">xxx</span>
var a=document.createElement("a");
document.getElementById("con").appendChild(a);
It does not work in IE.
So I wonder what is the problem?
DOM refers to a tree you make out of XML. The tree is made up of nodes. For example:
<a x="bb">
<b> text </b>
</a>
turns into a tree with three nodes: one for a and one for b and one for the text. The nodes contains the attributes as fields. So the a node will have a field: x="bb".
HTML is (practically) XML so you can build a DOM tree out of it. HTML is just XML with predefined elements. I.e., you can't use whatever names you want for your elements (you can't use <children>, <ball>,...) you can use the predefined names (a, span, div, ...).
I say "practically" because HTML is usually broken XML (for example using <br> is wrong XML. you should use <br /> instead). The browsers have smart parsers that know how to overcome this broken XML and make a usuable tree out of the HTML.
You have an error in your code, it misses an 'e':
document.getElementById('con').appendChild(a);
appendChild() is buggy in IE
I'm trying to create Dynamic SVG graphics, it is my understanding that the only way to create dynamic SVG is to use a scripting language, so I have a few questions, basically I'd like to load or embed the SVG to a HTML web page and control the graphics using Inputs in the web page, rather than hardcoding the ECMAscript in the SVG file. I'm not entirely sure if I should use the embed tag or an iframe for displaying the SVG here are my doubts regarding SVG and scripting:
Whats the difference (in terms of scripting) in using an <iframe> or and <embed> tag for accessing the SVG elements?, maybe someone can include simple examples.
Can SVG evaluate math expressions in element attributes(just to be sure)?
Don't use either <iframe> or <embed>. Instead, embed your SVG directly in XHTML like so:
http://phrogz.net/svg/svg_in_xhtml5.xhtml
With that, you have full access to the SVG DOM as part of your document. As shown in that example, you simply need to be certain to create SVG elements (but not attributes) using the SVG namespace. You must also ensure that your web host is sending the content type for xhtml as application/xhtml+xml or text/xml, not text/html.
phrogz$ curl --silent -I http://phrogz.net/svg/svg_in_xhtml5.xhtml | grep "Type"
Content-Type: application/xhtml+xml
For more examples of JavaScript manipulating SVG mixed with HTML, see the various .xhtml files in that same directory. A particularly compelling example is this one, which dynamically creates hundreds of small SVG files as inline elements flowing like text.
And to your question:
Can SVG evaluate math expressions in element attributes(just to be sure)?
Not in general, no. However, the usage of SMIL Animation does allow you to specify various interpolation methods of properties over time.
Finally, note that you don't have to put SVG in HTML to make it dynamic. You can script SVG with JavaScript directly. For example, see this test file (press the green button to start simulation):
http://phrogz.net/svg/SpringzTest.svg
Whats the difference (in terms of scripting) in using an or and tag for accessing the SVG elements?, maybe someone can include simple examples.
<iframe>:
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.
Source: https://developer.mozilla.org/en/HTML/Element/iframe#Scripting
We access iframe content by iframe_element.contentWindow method:
<html>
<body>
<iframe id="SVG_frame" src="image.svg"></iframe>
</body>
<script>
var SVG_frame = document.getElementById ( "SVG_frame" );
var SVG_content = null;
function getContent ()
{
SVG_content = SVG_frame.contentWindow;
SVG_content ? alert ( "YAY!" ) : alert ( "BOO!" );
}
SVG_frame.onload = getContent;
</script>
</html>
<embed>:
Example (view source): https://jwatt.org/svg/demos/scripting-across-embed.html
(both methods fail at least in Chromium)
<object>
Example (view source): https://jwatt.org/svg/demos/scripting-across-object.html
Can SVG evaluate math expressions in
element attributes(just to be sure)?
like <element attribute="48/2*(9+3)"/>?
I did't find a word about it in SVG spec.
EDIT
Personally, I recommend to use <object> + Data URI Scheme and/or object_element.contentDocument. I've tested both in Chromium and Firefox.
AHA! <object> has similar security behavior to <iframe>: domain, protocol must be same for site and SVG file.
EDIT2
If You are interested how to get markup vector graphics to work in Internet Explorer(s) without plug-in(s), then Vector Markup Language is the way.
Well, it depends on what you mean with dynamic. In most cases yes, you'll probably want scripts. There's no difference if you put your script in the HTML or the SVG file, both will be executed by the same engine.
You can create interactive/animated svg content with the declarative animation elements (aka SMIL). You can also do simple hover effects with CSS :hover rules, or transitions with CSS3 Transitions.
XSLT can also be used to make somewhat dynamic svg content, since it can transform your input to something else. It doesn't cover the interaction aspect though.
You can access the svg elements from the HTML file that includes it with either of:
theEmbeddingElement.contentDocument (preferred, but doesn't work on <embed>)
or alternatively theEmbeddingElement.getSVGDocument().