Asp Forum - short script -- what is wrong?

Jay Braun

8/4/2015 3:02:00 AM

Here is a short trivial svg document that correctly displays a red square with a green border on a blue background. (The original script drew the red square and all other shapes with a "path" element):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
<svg version="1.0" xmlns="http://www.w3.org/2000... width="2188.000000pt" height="1312.000000pt" viewBox="0 0 2188.000000 1312.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1312.000000) scale(0.100000,-0.100000)"
stroke="none">
<rect width="999999999" height="999999999" style="fill: blue" />
<path fill="red" stroke="green" stroke-width="100" d="M 10000 7000 l 0 1600 l 1600 0 l 0 -1600 l -1600 0 z" />
</g>
</svg>

In my application, I will need to create and update several squares and other shapes over time. So I will need a script. I tried the following to try scripting the single red square, but nothing displays. Note that I have added id and onload attributes to the svg element:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
<svg version="1.0" xmlns="http://www.w3.org/2000... width="2188.000000pt" height="1312.000000pt" viewBox="0 0 2188.000000 1312.000000" preserveAspectRatio="xMidYMid meet" iid="bigbox" onload="init()" >
<g transform="translate(0.000000,1312.000000) scale(0.100000,-0.100000)"
stroke="none">
<rect width="999999999" height="999999999" style="fill: blue" />

<script type="application/ecmascript">
function init() {
var bigbox=document.getElementById("bigbox");
var ns="http://www.w3.org/2000...;

var p=document.createElementNS(ns,"path");
p.setAttribute("fill", "red");
p.setAttribute("stroke", "green");
p.setAttribute("stroke-width", "100");
p.setAttribute("d", "M 10000 7000 l 0 1600 l 1600 0 l 0 -1600 l -1600 0 z");
bigbox.appendChild(p);

}
</script>

</g>
</svg>

I suspect that my error(s) will be obvious to the experts here. Thanks,
Jay

7 Answers

Evertjan.

8/4/2015 9:18:00 AM

Jay Braun <lyngwyst@gmail.com> wrote on 04 Aug 2015 in
comp.lang.javascript:

> In my application, I will need to create and update several squares and
> other shapes over time. So I will need a script. I tried the following
> to try scripting the single red square, but nothing displays. Note that
> I have added id and onload attributes to the svg element:
>
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
> <svg version="1.0" xmlns="http://www.w3.org/2000...
> width="2188.000000pt" height="1312.000000pt" viewBox="0 0 2188.000000
> 1312.000000" preserveAspectRatio="xMidYMid meet" iid="bigbox"

iid= will never do id=

However

> onload="init()" >

why not do:

onload="init(this)"

[..]

> function init() {
> var bigbox=document.getElementById("bigbox");

and:

function init(bigbox) {
//var bigbox=document.getElementById("bigbox");

> var ns="http://www.w3.org/2000...;
>
[..]
>}
> </script>
>
> </g>
> </svg>
>
> I suspect that my error(s) will be obvious to the experts here. Thanks,
> Jay

Methinks the mixture of ready svg and javascript induced shapes
makes the whole thing error-prone. I for one can't even deduce what you want
to show.

Look at this nice and less error-prone full-javascript way:

<http://solvedstack.com/questions/javascript-createe...

Add just <!DOCTYPE HTML> to the top,
with that and var xmlns = "http://www.w3.org/2000...
you don't seem to need the whole rigmarole.

You can inspect the resulting svg-code in the body
using F12 [in Chrome and other browsers]

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Martin Honnen

8/4/2015 9:20:00 AM

Jay Braun wrote:
> Here is a short trivial svg document that correctly displays a red square with a green border on a blue background. (The original script drew the red square and all other shapes with a "path" element):
>
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
> <svg version="1.0" xmlns="http://www.w3.org/2000... width="2188.000000pt" height="1312.000000pt" viewBox="0 0 2188.000000 1312.000000" preserveAspectRatio="xMidYMid meet">
> <g transform="translate(0.000000,1312.000000) scale(0.100000,-0.100000)"
> stroke="none">
> <rect width="999999999" height="999999999" style="fill: blue" />
> <path fill="red" stroke="green" stroke-width="100" d="M 10000 7000 l 0 1600 l 1600 0 l 0 -1600 l -1600 0 z" />
> </g>
> </svg>
>
> In my application, I will need to create and update several squares and other shapes over time. So I will need a script. I tried the following to try scripting the single red square, but nothing displays. Note that I have added id and onload attributes to the svg element:
>
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
> <svg version="1.0" xmlns="http://www.w3.org/2000... width="2188.000000pt" height="1312.000000pt" viewBox="0 0 2188.000000 1312.000000" preserveAspectRatio="xMidYMid meet" iid="bigbox" onload="init()" >
> <g transform="translate(0.000000,1312.000000) scale(0.100000,-0.100000)"
> stroke="none">
> <rect width="999999999" height="999999999" style="fill: blue" />
>
> <script type="application/ecmascript">
> function init() {
> var bigbox=document.getElementById("bigbox");
> var ns="http://www.w3.org/2000...;
>
> var p=document.createElementNS(ns,"path");
> p.setAttribute("fill", "red");
> p.setAttribute("stroke", "green");
> p.setAttribute("stroke-width", "100");
> p.setAttribute("d", "M 10000 7000 l 0 1600 l 1600 0 l 0 -1600 l -1600 0 z");
> bigbox.appendChild(p);
>
> }
> </script>
>
> </g>
> </svg>
>
> I suspect that my error(s) will be obvious to the experts here. Thanks,

Well
iid="bigbox"
should be
id="bigbox"
I think.

But I suspect you want to add the created "path" element to the group
"g" in your document so I would put an id attribute on that "g" element
and call document.getElementById("myGId").appendChild(p);

--- news://freenews.netfront.net/ - complaints: news@netfront.net ---

Jay Braun

8/4/2015 12:36:00 PM

Thank you. iid was an error that I introduced just before posting.

Yes, the mix of hard-coded svg and Javascript is ugly. In my larger project, I have a fixed background and icons/symbols that will be updated over time. I like the style of the link posted by Evertjan.

Jay Braun

8/4/2015 1:00:00 PM

I wanted to run the recommended script at:

<http://solvedstack.com/questions/javascript-createe...

which has:

<head>
<style>
...
</style>
<script>
...
</script>
</head>
<body>
</body>

So I simply added, on top:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
<svg version="1.0" xmlns="http://www.w3.org/2000/svg...

and on the bottom:

</svg>

Nothing happens when I double-click the svg file. I am running on a Macintosh and my default browser os Firefox.

Evertjan.

8/4/2015 1:21:00 PM

Jay Braun <lyngwyst@gmail.com> wrote on 04 Aug 2015 in
comp.lang.javascript:

> I wanted to run the recommended script at:
>
> <http://solvedstack.com/questions/javascript-createe...
>
> which has:
>
> <head>
> <style>
> ...
> </style>
> <script>
> ...
> </script>
> </head>
> <body>
> </body>
>
> So I simply added, on top:
>
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd...
> <svg version="1.0" xmlns="http://www.w3.org/2000/svg...

Noooo !

> and on the bottom:
>
> </svg>
>
> Nothing happens when I double-click the svg file. I am running on a
> Macintosh and my default browser os Firefox.

Don't add those ugly headers,
and don't put the Javascript inside <svg>
<javascript> especially onload-functions,
belong in the <head>.

Just, as I suggested:

Add just <!DOCTYPE HTML> to the top.

Then run the Javascript as provided in the <head>

The <body> can remain empty,
[or absent as it will be generated then]

If you hit F12 [tested Chrome, Firefox, Edge]
you can see the body will be filled by
code like you provided.

TESTING HERE [Chrome, Firefox, Edge]:
<http://hannivoort.org/test/svgte...
<view-source:hannivoort.org/test/svgtest.asp>

[view-source: does not work in MS-Edge]

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Jay Braun

8/4/2015 1:45:00 PM

I apologize for making you post the same advice twice. Thank you.

Jay

Evertjan.

8/4/2015 2:00:00 PM

Jay Braun <lyngwyst@gmail.com> wrote on 04 Aug 2015 in comp.lang.javascript:

> I apologize for making you post the same advice twice. Thank you.

This is not email, so please quote what you are responding on.

======================

If you use F12 [tried that in Chrome],
you can even copy the resulting content
in the [in the source still empty] <body>
and use that in a static page.

I don't think that is very usefull,
but certainly educational and enjoyable.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

comp.lang.javascript

short script -- what is wrong?

Jay Braun

Evertjan.

Martin Honnen

Jay Braun

Jay Braun

Evertjan.

Jay Braun

Evertjan.

x Login to ForumsZone