Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28493 > unrolled thread

short script -- what is wrong?

Back to article view | Back to comp.lang.javascript

Contents

  short script -- what is wrong? Jay Braun <lyngwyst@gmail.com> - 2015-08-03 20:02 -0700
    Re: short script -- what is wrong? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-08-04 11:17 +0200
    Re: short script -- what is wrong? Martin Honnen <mahotrash@yahoo.de> - 2015-08-04 11:19 +0200
    Re: short script -- what is wrong? Jay Braun <lyngwyst@gmail.com> - 2015-08-04 05:35 -0700
    Re: short script -- what is wrong? Jay Braun <lyngwyst@gmail.com> - 2015-08-04 06:00 -0700
      Re: short script -- what is wrong? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-08-04 15:20 +0200
        Re: short script -- what is wrong? Jay Braun <lyngwyst@gmail.com> - 2015-08-04 06:45 -0700
          Re: short script -- what is wrong? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-08-04 15:59 +0200

#28493 — short script -- what is wrong?

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/svg" 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/svg" 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/svg";

   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

[toc] | [next] | [standalone]

#28494

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/svg"
> 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/svg";
> 
[..]
>}
> </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-createelement> 

Add just <!DOCTYPE HTML> to the top,
with that and var xmlns = "http://www.w3.org/2000/svg"
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)

[toc] | [prev] | [next] | [standalone]

#28495

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/svg" 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/svg" 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/svg";
>
>     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 ---

[toc] | [prev] | [next] | [standalone]

#28496

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.

[toc] | [prev] | [next] | [standalone]

#28497

I wanted to run the recommended script at: 

<http://solvedstack.com/questions/javascript-createelement>

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.

[toc] | [prev] | [next] | [standalone]

#28498

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-createelement>
> 
> 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/svgtest.asp>
<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)

[toc] | [prev] | [next] | [standalone]

#28499

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

Jay

[toc] | [prev] | [next] | [standalone]

#28500

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)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web