[BATIK-272] Change the DOM with scripting does not work

• Type: Bug
• Status: Resolved
• Resolution: Later
• Affects Version/s: 1.5
• Component/s: Scripting
• Environment: Operating System: All; Platform: PC
• Assignee: Batik Developer's Mailing list
• Reporter: Luc Minnebo
• Created: 21/Jun/02 15:02
• Updated: 20/Mar/05 17:06
• Resolved: 20/Mar/05 17:06

Description

See attached svg document; 'onmouseover' on the star, should display a
rectangle around it; Clicking the star should clone a star; Clicking the
aeroplane should put the aeroplane behind the bomb (bad example, sorry...)

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

<svg height="650" width="800" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g transform="translate(0,10)">
<defs>
<style type="text/css"><![CDATA[
rect

{stroke:black;fill:white }

line

{stroke:red;stroke-width:3}

]]></style>
</defs>
<g transform="translate(20,20)">
<g id="room">
<path d="M0.5 0.5v207.86l198.688-51.334V0.5H0.5z"
style="fill:#F881BF;"/>
<path d="M199.188 0.5v156.526L400.5 254.36V0.5H199.188z"
style="fill:#FF7F00;"/>
<path d="M0.5 208.36l198.688-51.334L400.5 254.36H0.5v-46z"
style="fill:#FFE600;"/>
<path d="M62.99 46.36l74.536-5.333v61.265L62.99 115.548V46.36z"
style="fill:#409D27;"/>
<path d="M327.764 51.026v81.833l-75.672-24.587V44.693l75.672
6.333z" style="fill:#F881BF;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M316.32 59.013v61.141l-57.764-16.789l0.001-
51.59l57.763 7.238z" style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M252.092 44.693l6.466 7.081"
style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M316.32 59.013l11.443-7.986" style="fill:none;fill-
rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M316.32 120.153l11.443 12.706" style="fill:none;fill-
rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M258.557 103.364l-6.465 4.908" style="fill:none;fill-
rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M264.402 45.724l23.078-9.6l25.907 13.699"
style="fill:none;fill-rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M287.48 36.124l-3.872-2.357" style="fill:none;fill-
rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M285.124 33.431c0 1.022-0.829 1.852-1.853 1.852c-1.022
0-1.852-0.829-1.852-1.852c0-1.023 0.829-1.852 1.852-1.852c1.023 0 1.853 0.829
1.853 1.852z"/>
<path d="M81.877 45.008c0 0 31.478 5.019 20.811 27.019S82.895
100.95 82.895 100.95l-19.905 3.077V46.36l18.888-1.352z" style="fill:#34AACD;"/>
<path d="M62.99 46.36l74.536-5.333v61.265L62.99 115.548V46.36z"
style="fill:none;fill-rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
<path d="M137.526 102.291L62.99 115.548v-11.521l62.532-
9.667V41.885l12.004-0.859v61.265l-12.004-7.931"
style="fill:#FF7F00;stroke:#000000;stroke-miterlimit:4;"/>
<g style="fill:none;fill-rule:nonzero;stroke:#000000;stroke-
miterlimit:4;">
<path d="M258.248 170.886c0 10.561-27.657 19.121-61.776
19.121s-61.776-8.563-61.776-19.121s27.658-19.119 61.776-19.119c34.119 0 61.776
8.563 61.776 19.119z" style="fill:#FFFFFF;"/>
<path d="M246.223 253.243h-98.694v-56.305h98.694v56.305z"
style="fill:#FFFFFF;stroke:none;"/>
<path d="M258.242 170.956c-0.121 10.525-27.728 19.051-
61.771 19.051s-61.649-8.523-61.771-19.051h-0.006v15.258h0.076c1.582 10.123 28.6
18.182 61.701 18.182c33.104 0 60.119-8.059 61.701-18.182h0.094v-15.258h-0.023h-
0.002z" style="fill:#FFFFFF;"/>
<path d="M147.534 196.938v56.307"/>
<path d="M245.832 196.938v56.307"/>
<path d="M156.243 205.841v47.402"/>
<path d="M236.699 205.841v47.402"/>
<path d="M173.734 209.292v43.951"/>
<path d="M219.208 209.292v43.951"/>
<path d="M196.47 211.593v41.65"/>
</g>
</g>
<!-- room -->
<g id="contents"/>
<!-- contents -->
<defs>
<g id="bomb">
<path
d="M183.734,119.848v6.643c11.666,4.752,17.5,12.871,17.5,24.357c0,7.16-
2.535,13.262-7.604,18.305s-11.188,7.564-18.359,7.564c-7.139,0-13.242-2.521-
18.311-7.564s-7.602-11.113-7.602-18.207c0-11.193,5.832-19.345,17.5-24.455v-
6.643c1.613-0.84,3.613-1.453,6-1.842v-1.023c0-3.346,1.09-6.164,3.271-
8.455c2.182-2.289,4.852-3.436,8.012-
3.436c4.266,0,9.412,2.578,15.438,7.734l2.588,2.238c6.252,5.352,11.348,8.027,15.2
89,8.027c1.336,0,2.996-0.504,4.982-1.514c0.293-0.156,0.684-0.236,1.174-
0.236c1.496,0,2.246,0.602,2.246,1.803c0,1.268-0.887,2.389-2.66,3.361c-
1.773,0.975-3.799,1.461-6.076,1.461c-4.85,0-10.869-3.016-18.059-9.049l-2.783-
2.334c-5.271-4.41-9.338-6.617-12.201-6.617c-4.23,0-6.346,2.68-
6.346,8.039c2.131,0.453,4.131,1.066,6,1.842z M206.916,102.473l1.957-
1.631l12.049,15.857l-14.006-14.227z M223.859,100.842h2.375l-1.117,14.355l-1.258-
14.355z M241.049,100.842l1.998,1.531l-13.645,14.375l11.646-15.906z
M245.533,117.038l0.389,2.277l-14.326,1.307l13.938-3.584z M248.359,134.018l-
1.17,2.002l-16.424-11.008l17.594,9.006z M233.252,140.948l-2.34,0.83l-3.605-
13.859l5.945,13.029z M216.855,146.803l-2.301-0.83l8.178-18.154l-5.877,18.984z"/>
<rect style="opacity:0" x="148" y="98" width="100"
height="80"/>
</g>
<!-- bomb -->
<g id="airplane">
<path d="M159.329,139.994l-6.275-
14h7.035l6.655,10.074l36.383-1.141l-17.241-
41.859h9.38l26.62,41.036h6.148c3.635,0,6.929,0.463,9.89,1.386l4.055,1.323c3,1.00
9,4.501,2.058,4.501,3.147c0,1.176-1.501,2.269-4.501,3.274l-4.055,1.323c-
2.961,0.925-6.318,1.386-10.079,1.386l-5.959-0.124l-26.62,40.998h-9.38l17.241-
41.758l-36.383-1.139l-6.655,10.133h-7.035l6.275-14.061z"/>
<rect style="opacity:0" x="148" y="98" width="100"
height="80"/>
</g>
<!-- airplane -->

<g id="star_def">
<path d="M25.932 16.499l-2.934-9c2.846 0 5.375 0.809 7.588
2.422c2.215 1.615 3.807 3.809 4.779 6.578h-9.434zM 27.725 22.061l7.641-
5.544c0.422 1.498 0.633 2.849 0.633 4.053c0 4.27-1.785 7.755-5.357 10.456l-
2.916-8.965zM 22.999 25.481l7.643 5.544c-2.412 1.648-4.959 2.474-7.643 2.474c-
2.67 0-5.217-0.824-7.641-2.474l7.641-5.544zM 18.274 22.061l-2.916 8.965c-3.572-
2.818-5.359-6.315-5.359-10.491c0-1.216 0.219-2.555 0.65-4.018l7.625 5.544zM
20.083 16.499h-9.434c0.949-2.759 2.535-4.948 4.762-6.569c2.225-1.619 4.754-
2.431 7.588-2.431l-2.916 9z"/>
<rect style="opacity:0" x="0" y="0" width="45" height="40"/>
</g>
<!-- star -->
</defs>

<rect id="hilite_box"
style="fill:none;stroke:black;visibility:hidden" x="0" y="0" width="45"
height="40"/>
<use id="star" xlink:href="#star_def" x="342" y="258"
onclick="clone_me(evt)" onmouseover="hilite_btn(evt)" onmouseout="hilite_btn
(evt)"/>
<g id="border">
<path d="M400.5 300.5H0.5V0.5h400v300z" style="fill:none;fill-
rule:nonzero;stroke:#000000;stroke-miterlimit:4;"/>
</g>
<!-- border -->
<g id="zorder">
<use id="zbomb" xlink:href="#bomb" style="fill:#D90000"
onclick="arrange_me(evt)"/>
<use id="zairplane" xlink:href="#airplane" style="fill:#409D27"
onclick="arrange_me(evt)"/>
</g>
<script type="text/ecmascript">
/*

• This function returns the innermost SVG object that triggered the
  event
• and that has a non-null id attribute. This can be either the event's
• target itself, or its parent node, or the first ancestor of the target
• with a non-null id.
  *
• Input Parameters:
• event - The JavaScript object describing the triggering event
• Return Value:
• The target node or first target's ancestor with a non-null id.
  */
  function get_target (event) { var target = event.getTarget(); while (target && !target.getAttribute('id')) target = target.getParentNode(); return target; }

/*

• This function places the highlighting box around the indicated object
  and
• makes it visible or invisible.
  *
• Input Parameters:
• target - SVG element where the box should be positioned on.
• visibility - the setting for the box's visibility property.
  */
  function move_box (target, visibility)
  Unknown macro: { var box_name = 'hilite_box'; var svgdoc = target.getOwnerDocument(); var svgobj = svgdoc.getElementById (box_name); if (svgobj) { svgobj.setAttribute ('x', target.getAttribute('x')); svgobj.setAttribute ('y', target.getAttribute('y')); var svgstyle = svgobj.getStyle(); if (svgstyle) svgstyle.setProperty ('visibility', visibility, ""); } }

/*

• This function makes the highlighting box visible or invisible around
• an icon depending on whether the mouse was moved over or out-of the
  icon.
  *
• Input Parameters:
• event - The JavaScript object describing the triggering event
  */
  function hilite_btn (event)
  Unknown macro: { var target = get_target(event); switch (event.getType()+'') { case 'mouseover': move_box (target, 'visible'); break; case 'mouseout': move_box (target, 'hidden'); break; } }

/*

• This function creates a duplicate of the object that was clicked and
• adds it to the "contents" group:
• The object's node is the event.target.
• The node is cloned.
• The cloned node's x & y attributes and its fill property or set to
• random values.
• The cloned node is appended to the contents group.
• Input Parameters:
• event - The JavaScript object describing the triggering event
  */
  function clone_me (event) { // List of colors assigned randomly to the clone object. var colors = new Array ('red', 'blue', 'yellow', 'cyan', 'green', 'gray', 'white', 'brown'); // Retrieve node of object that was clicked on. var target = get_target(event); var svgdoc = target.getOwnerDocument(); // Show highlight box around the icon that was clicked on. // (This should already be done because of the mouseover event, but the // display might not be updated by the time this event is triggered. This // call makes sure the display gets updated.) move_box (target, 'visible'); // Determine random values for the new elements x, y, and fill attributes // and properties. var x = 10+335*Math.random(); var y = 10+200*Math.random(); var fill = Math.floor(colors.length*Math.random()); if (fill == colors.length) fill = colors.length-1; fill = colors[fill]; // Clone the object and set its attributes and properties. var newnode = target.cloneNode(false); newnode.setAttribute ('x', x); newnode.setAttribute ('y', y); newnode.getStyle().setProperty ('fill', fill, ""); // Retrieve the node for "contents" group. var contents = svgdoc.getElementById ('contents'); // Insert the cloned object into the contents group node. newnode = contents.appendChild (newnode); }

/*

• This function moves the object that was clicked to the back of all
  other
• objects in its group:
• The object's node is the event.target.
• The node is removed from its parent node (its container group).
• The node is reinserted into its parent node before the first child
  node
• in the parent.
• Input Parameters:
• event - The JavaScript object describing the triggering event
  */
  function arrange_me (event) { // Retrieve node of object that was clicked on. var target = get_target(event); // Retrieve node of object's parent group. var groupnode = target.getParentNode(); // Remove object's node from its group node. groupnode.removeChild (target); // Insert object's node into its group node before the first child of the // group. groupnode.insertBefore (target, groupnode.getFirstChild()); }

  </script>
  </g>
  </g>
  </svg>