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.
Related
I'd like to run a bookmarklet to capture the current state of a document (web page) as HTML. The document is built using Polymer, so most of the elements are inside shadow roots, which means that their contents are not included in the output of document.body.innerHTML.
Is it possible to export a JavaScript-generated document as HTML, including the content of Shadow DOM elements?
What you want is to capture the composed/rendered dom tree. Here are a few examples of doing this that may be useful:
Polymer's inspector (type sinspect() in the console on a page using polymer) - code
Shadow DOM visualizer - code
The latter shows the <content>, which is probably not what you want. But you could easily modify it to only contain the rendered nodes.
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.
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().
I'm using a webkit browser (safari), so this question is specific to webkit.
I have safari rendering an XML document (it's not HTML). In order to style certain sections of the document, I've attached a stylesheet (see below) to the document. In the case below, the text within the first "thing" element is displayed in magenta.
This works reasonably well. But I would also like to dynamically modify the style of various elements (I assume by using javascript) after the document has been rendered.
I can use javascript to capture the first "thing" element using document.getElementsByName("a").item(0); but I'm not sure how to set the style (or if this is possible at all). this does not work => document.getElementsByName("a").item(0).style.display = "none";
Any thoughts on how to change the style of an xml element in a browser after it's been rendered?
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="simple.css" type="text/css"?>
<document xmlns:ab="adfadfafadf">
<thing name="a">stuff</thing>
<thing name="b">stuff2</thing>
</document>
_
//simple.css________________________________
document {margin: 1em; font-family: sans-serif; font-size: 14px;}
thing[name="a"] {color: magenta;}
I can use javascript to capture the first "thing" element using document.getElementsByName("a").item(0)
You shouldn't even be able to do that, and you can't on non-WebKit browsers. getElementsByName is a DOM Level 1 HTML method that shouldn't be available on XML documents, which have no notion of name attributes having special significance. (This is slightly different to the situation with attributes of schema type ID.)
Can you legitimately expect a style property to exist on Elements in arbitrary XML documents? The DOM Level 2 Style spec has this to say about the ElementCSSInlineStyle interface:
The expectation is that an instance of the ElementCSSInlineStyle interface can be obtained by using binding-specific casting methods on an instance of the Element interface when the element supports inline CSS style informations.
I'd argue that an arbitrary XML document's elements do not support inline CSS style information, as there is no style or other attribute that could be used to introduce CSS, unlike with [X]HTML. Mozilla and Opera agree with WebKit here in not providing it.
However, DOM Level 2 Style's document.styleSheets interface should work (in any of those browser bases). For example you can remove the thing[name="a"] rule by saying:
document.styleSheets[0].deleteRule(1);
and add a replacement by saying:
document.styleSheets[0].insertRule('thing[name="a"] {display: none;}', 1);
It doesn't look good, but I would try clicking on the links in the W3C spec to see if WebKit supports the styling you want to do. If it doesn't, you could dynamically request a stylesheet from the server after you've looked at the data. That might be the only work around.
I am using "node.attributes" to retrieve all the attributes of a DOM node using JavaScript in IE.
It gives me additional attributes which are not specified in the source .In Firefox it gives only those which are specified in html source (which is expected).
is there any way to retrieve "only the attributes" of a DOM elements which are specified in its HTML source in IE?
Thanks in advance.
-Sourabh
The attributes have a specified property which is true if the attribute was specified in the HTML source or explicitly set by script.