Normally an SVG document is loaded/parsed/interpreted inside an HTML
document using an 'object' (or 'embed') element, although there are
supposedly other ways too. The problem is, the SVG document must be
static this way.
I want to use the DOM interface to build SVG dynamically inside an HTML
document. I am guessing I can build it inside HTML within an 'object' (or
maybe 'iframe'?) element.
My intentions/goals:
In Javascript, I construct an object 'embedSVG' which has properties and
methods for creating valid SVG elements and setting their attributes and
attribute values.
During construction, the SVG document is created with its root element.
During debugging in FF 2.0 (I'll work on an MSIE-compatible format later),
I am using the Mozilla DOM Inspector and comparing nodes when the
'object' element is loading a valid external SVG document, and when I am
appending the child representing the SVG document created by the DOM
functions.
However the child node (#document) does not specify 'svg' as the root
element, but instead 'HTML'. Something is not working.
Here is the relevant code in 'ScriptTest.htm l' which is the HTML in which
the SVG is supposed to be embedded. Below it is the relevant code for
'svglib.js' which is supposed to contain code for building the SVG
dynamically.
What this code is supposed to do is load the HTML page and execute the
anonymous script, and draw a navy blue-bordered yellow rectangle on a
blank page. This is similar to the example in the SVG 1.1 W3C
Recommendation on page 202 of the 719-page PDF.
I am getting an exception when embedSVG object placeInHTML() method is
called: NS_ERROR_DOM_HI ERARCHY_REQUEST _ERR. I find in DOM Inspector in
spite of or after the exception that a document is placed as a child of
the object element, but it is HTML, with a default 'head', 'title',
'body' elements placed.
Where am I blowing it?
===== start ScriptTest.html excerpt =====
..
..
..
<body>
<object id="insertSVG"> </object>
<script type="text/javascript">
var svgHTMLnode = document.getEle mentById("inser tSVG");
var svgObj = new embedSVG(400, 200);
svgObj.placeInH TML(svgHTMLnode );
svgObj.setFill( "yellow");
svgObj.setStrok e("navy");
svgObj.setStrok eWidth("10");
svgObj.drawRect (20, 20, 200, 100);
</script>
</body>
</html>
===== end ScriptTest.html excerpt =====
====== start svglib.js excerpt ======
function embedSVG (docWidth, docHeight )
{
//arg checking
var svgXMLdoc;
var namespaceURI = "http://www.w3.org/2000/svg";
var qualifiedName = "svg";
var doctype = null;
this.svgXMLdoc = svgXMLdoc =
document.implem entation.create Document(namesp aceURI,
qualifiedName, doctype);
var rootElem = svgXMLdoc.first Child;
rootElem.setAtt ribute("xmlns", "http://www.w3.org/2000/svg");
rootElem.setAtt ribute("height" , String(docHeigh t));
rootElem.setAtt ribute("width", String(docWidth ));
this.rootElemen t = rootElem;
this.fill = "";
this.setFill = function (fillString) { this.fill = fillString; };
this.stroke = "";
this.setStroke = function (strokeString) {
this.stroke = strokeString; };
this.strokeWidt h = "";
this.setStrokeW idth = function (strokeWidthStr ing) {
this.strokeWidt h = strokeWidthStri ng;
};
this.placeInHTM L = function (htmlNode) {
return ((htmlNode.appe ndChild(this.sv gXMLdoc));
};
this.drawRect = function (left, top, width, height,
roundedXradius, roundedYradius) {
var docElem = this.svgXMLdoc. createElement(" rect");
// arg checking
docElem.setAttr ibute("x", left);
docElem.setAttr ibute("y", top);
docElem.setAttr ibute("width", width);
docElem.setAttr ibute("height", height);
docElem.setAttr ibute("rx", roundedXradius) ;
docElem.setAttr ibute("ry", roundedYradius) ;
docElem.setAttr ibute("fill", this.fill);
docElem.setAttr ibute("stroke", this.stroke);
docElem.setAttr ibute("strokeWi dth", this.strokeWidt h);
this.rootElemen t.appendChild(d ocElem);
return (docElem);
};
}
====== end svglib.js excerpt ======
I am being guided by N.C. Zakas' Professional JavaScript for Web
Developers.
3  6359 
SMH <se********@gma il.comwrote:
>Normally an SVG document is loaded/parsed/interpreted inside an HTML
document using an 'object' (or 'embed') element, although there are
supposedly other ways too.
Using mixed namespaces, this requires serving the document as XHTML.
Demo: http://www.spartanicus.utvinternet.i...amespace.xhtml
(Note that MS IE does not support XHTML)
>The problem is, the SVG document must be
static this way.
If by that you mean it has to have predefined dimensions, then you are
correct. That limitation does not exist for mixed namespace documents.
>My intentions/goals:
In Javascript, I construct an object 'embedSVG' which has properties and
methods for creating valid SVG elements and setting their attributes and
attribute values.
During construction, the SVG document is created with its root element.
During debugging in FF 2.0 (I'll work on an MSIE-compatible format later),
I am using the Mozilla DOM Inspector and comparing nodes when the
'object' element is loading a valid external SVG document, and when I am
appending the child representing the SVG document created by the DOM
functions.
However the child node (#document) does not specify 'svg' as the root
element, but instead 'HTML'. Something is not working.
I'm guessing that you want to use JS to determine the size of the
viewport that the SVG will need, and then dynamically set that size on
the object or iframe element in the mother document?
The JS needed to determine the viewport size needed by the SVG has to
run in the SVG file, the resulting values should then be used in the
mother HTML document. I don't know enough about JS to say if that's
possible, but I doubt it.
--
Spartanicus
On Mar 17, 9:15 am, SMH <sevis.a...@gma il.comwrote:
Normally an SVG document is loaded/parsed/interpreted inside an HTML
document using an 'object' (or 'embed') element, although there are
supposedly other ways too. The problem is, the SVG document must be
static this way.
I want to use the DOM interface to build SVG dynamically inside an HTML
document. I am guessing I can build it inside HTML within an 'object' (or
maybe 'iframe'?) element.
My intentions/goals:
In Javascript, I construct an object 'embedSVG' which has properties and
methods for creating valid SVG elements and setting their attributes and
attribute values.
During construction, the SVG document is created with its root element.
During debugging in FF 2.0 (I'll work on an MSIE-compatible format later),
I am using the Mozilla DOM Inspector and comparing nodes when the
'object' element is loading a valid external SVG document, and when I am
appending the child representing the SVG document created by the DOM
functions.
However the child node (#document) does not specify 'svg' as the root
element, but instead 'HTML'. Something is not working.
Here is the relevant code in 'ScriptTest.htm l' which is the HTML in which
the SVG is supposed to be embedded. Below it is the relevant code for
'svglib.js' which is supposed to contain code for building the SVG
dynamically.
What this code is supposed to do is load the HTML page and execute the
anonymous script, and draw a navy blue-bordered yellow rectangle on a
blank page. This is similar to the example in the SVG 1.1 W3C
Recommendation on page 202 of the 719-page PDF.
I am getting an exception when embedSVG object placeInHTML() method is
called: NS_ERROR_DOM_HI ERARCHY_REQUEST _ERR. I find in DOM Inspector in
spite of or after the exception that a document is placed as a child of
the object element, but it is HTML, with a default 'head', 'title',
'body' elements placed.
Where am I blowing it?
===== start ScriptTest.html excerpt =====
.
.
.
<body>
<object id="insertSVG"> </object>
<script type="text/javascript">
var svgHTMLnode = document.getEle mentById("inser tSVG");
var svgObj = new embedSVG(400, 200);
svgObj.placeInH TML(svgHTMLnode );
svgObj.setFill( "yellow");
svgObj.setStrok e("navy");
svgObj.setStrok eWidth("10");
svgObj.drawRect (20, 20, 200, 100);
</script>
</body>
</html>
===== end ScriptTest.html excerpt =====
====== start svglib.js excerpt ======
function embedSVG (docWidth, docHeight )
{
//arg checking
var svgXMLdoc;
var namespaceURI = "http://www.w3.org/2000/svg";
var qualifiedName = "svg";
var doctype = null;
this.svgXMLdoc = svgXMLdoc =
document.implem entation.create Document(namesp aceURI,
qualifiedName, doctype);
var rootElem = svgXMLdoc.first Child;
rootElem.setAtt ribute("xmlns", "http://www.w3.org/2000/svg");
rootElem.setAtt ribute("height" , String(docHeigh t));
rootElem.setAtt ribute("width", String(docWidth ));
this.rootElemen t = rootElem;
this.fill = "";
this.setFill = function (fillString) { this.fill = fillString; };
this.stroke = "";
this.setStroke = function (strokeString) {
this.stroke = strokeString; };
this.strokeWidt h = "";
this.setStrokeW idth = function (strokeWidthStr ing) {
this.strokeWidt h = strokeWidthStri ng;
};
this.placeInHTM L = function (htmlNode) {
return ((htmlNode.appe ndChild(this.sv gXMLdoc));
};
this.drawRect = function (left, top, width, height,
roundedXradius, roundedYradius) {
var docElem = this.svgXMLdoc. createElement(" rect");
// arg checking
docElem.setAttr ibute("x", left);
docElem.setAttr ibute("y", top);
docElem.setAttr ibute("width", width);
docElem.setAttr ibute("height", height);
docElem.setAttr ibute("rx", roundedXradius) ;
docElem.setAttr ibute("ry", roundedYradius) ;
docElem.setAttr ibute("fill", this.fill);
docElem.setAttr ibute("stroke", this.stroke);
docElem.setAttr ibute("strokeWi dth", this.strokeWidt h);
this.rootElemen t.appendChild(d ocElem);
return (docElem);
};}
====== end svglib.js excerpt ======
I am being guided by N.C. Zakas' Professional JavaScript for Web
Developers.
You're making things more complicated than they need to be. You don't
need to use an iframe or object tag to use SVG; just use a DIV. Be
sure, however, to include the appropriate XML namespaces on your HTML
tag; the SVG NS ( http://www.w3.org/2000/svg) for starters, but you
might also look at including XLink ( http://www.w3.org/1999/xlink) for
embedded links on SVG elements.
Another thing to keep in mind when DOM scripting SVG is that SVG is
strict XML, unlike typical DHTML scripting. So you need to use
namespace-aware DOM functions, such as createElementNS and
setAttributeNS. Use your SVG namespaceURI when creating elements
using createElementNS , but you can simply use 'null' for
setAttributeNS. Try that out and let us know how it works.
-D
Spartanicus <in*****@invali d.invalidwrote in comp.lang.javas cript:
SMH <se********@gma il.comwrote:
>>Normally an SVG document is loaded/parsed/interpreted inside an HTML
document using an 'object' (or 'embed') element, although there are
supposedly other ways too.
Using mixed namespaces, this requires serving the document as XHTML.
Demo: http://www.spartanicus.utvinternet.i...amespace.xhtml
(Note that MS IE does not support XHTML)
>>The problem is, the SVG document must be
static this way.
If by that you mean it has to have predefined dimensions, then you are
correct. That limitation does not exist for mixed namespace documents.
>>My intentions/goals:
In Javascript, I construct an object 'embedSVG' which has properties
and methods for creating valid SVG elements and setting their
attributes and attribute values.
During construction, the SVG document is created with its root
element. During debugging in FF 2.0 (I'll work on an MSIE-compatible
format later), I am using the Mozilla DOM Inspector and comparing
nodes when the 'object' element is loading a valid external SVG
document, and when I am appending the child representing the SVG
document created by the DOM functions.
However the child node (#document) does not specify 'svg' as the root
element, but instead 'HTML'. Something is not working.
I'm guessing that you want to use JS to determine the size of the
viewport that the SVG will need, and then dynamically set that size on
the object or iframe element in the mother document?
The JS needed to determine the viewport size needed by the SVG has to
run in the SVG file, the resulting values should then be used in the
mother HTML document. I don't know enough about JS to say if that's
possible, but I doubt it.
You're absolutely right that I didn't really explain my ultimate need for
this.
I have a very interactive HTML document that takes form entries
representing input data that will be statistically evaluated. The results
will be presented graphically through SVG (that is, the plot axes have to
be drawn, the plot scale will be rendered, the plot points (as a scatter
plot or maybe column chart). Of course, all these are unknown at "run
time" which is why the script has to write the SVG document content
dynamically. I decided to go with SVG because it is a W3C
"recommendation " (i.e., standard). I am aware of a lot of other hacks out
there (e.g., libraries of script manipulating CSS-controlled painted
DIVs), but without having used them, I am guessing that they don't always
work in every conceivable situation (without more hacking) and give hope
for wide cross-browser compatibility.
I have been running around Google and the Internet to see if I can stumble
upon something that someone has used.
I have seen the createElementNS () method mentioned before but never really
used it. Poster David Golightly mentions it also, so I will try to apply
his recommendations and report back.
After making it work in FF, I will try to make it work in IE (a must for
all the target users of this page interactivity). I am guessing that use
of ActiveXObjects often makes more things possible in the MS sort of way.
Yes, I know that working with MS scripting is beyond the standard, but
that is the one exception in scripting beyond the perimeter than I am
willing to make. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Kepler |
last post by:
How do you get the height of the client browser in IE? Both
document.body.clientHeight and document.body.offsetHeight return the
height of the document. If the page is long and there's a vertical
scrollbar, you get the height of the entire document, screwing up any
chance of centering a window in the browser using these values.
Is there a way to get the height of the actual browser window and not
the entire page height?
Thanks.
|
by: Stumped and Confused |
last post by:
Hello,
I really, really, need some help here - I've spent hours trying to find a
solution.
In a nutshell, I'm trying to have a user input a value in form's
textfield. The value should then be assigned to a variable and output
using document.write.
(Note, there is no submit button or other form elements. Basically
|
by: Christopher Benson-Manica |
last post by:
Why is building a table with the DOM slower than using an array? IOW,
why is
var table=document.createDocumentFragment();
for( var i=0; i < 4000; i++ ) {
tr=table.insertRow( table.rows.length );
td=tr.appendChild( document.createElement('td') );
td.appendChild( 'foo' );
}
someElement.appendChild( table );
|
by: Horia Tudosie |
last post by:
Using Visual Studio 2003
This is to report a series of bugs regarding the FlagsAttribute and
(independently) the usage of interfaces in Web applications.
Let’s declare xColors type like:
public enum xColors {
Red = 1,
|
by: Desmond Cassidy |
last post by:
Hi,
I have being trying to get a grip of HTML data manipulation and am using the mshtml class and System.Net to retriver HTML pages.
Now as far as I can see, one can read HTML in different ways.
1. Using the WebBrowser and loading the HTML into the mshtml.HTMLDocument class and then step through the various tags (input, a), tables etc.
2. Use System.Net.WebRequest/Response to load the data into a HTML string using a Stream Reader.
Now...
| | |
by: Michael Powe |
last post by:
How can I make an XHTML-compliant form of an expression in this
format:
document.write("<scr"+"ipt type='text/javascript' src='path/to/file.js'>"+"</scr"+"ipt>");
this turns out to be a non-trivial exercise. inserting '<' and
'>' causes the browser to write the text to the page as literal
text rather than as the intended script element. Using escape codes
seemed to work (makes it standard compliant) but the text is not
written to...
|
by: James Stroud |
last post by:
Hello All,
I am interested in setting up a modest invoicing system for some
consulting I am doing. I like the idea of managing this on the web and
creating invoices and printing them from a browser. However, I'm not
really sure where to start. I've played with some CMS applications, but
they seem more for blogging (mamba, wordpress, etc.). Ideally, I would
like to interface with mySQL (or whatever the favorite web-flavor
database app is...
|
by: Une Bévue |
last post by:
the purpose :
avoid all banners and unusefull contents of an html document the leaves
intact the part from start to body and inside the body leave only the
part where user has clicked (by mousedown -- mousemove --mouseup)).
for example a schematic document as input :
<html><title>...<meta<<link to csss, javascript ect>
<body...>
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
| | |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
