| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" |
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| |
| <!-- |
| |
| Copyright 2002-2003 The Apache Software Foundation |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- Dynamic update for use --> |
| <!-- --> |
| <!-- @author vincent.hardy@sun.com --> |
| <!-- @version $Id$ --> |
| <!-- ========================================================================= --> |
| <?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="body" width="450" height="500" viewBox="0 0 450 500"> |
| <title>Update on <use></title> |
| |
| <text x="50%" y="45" class="title">x/y/transform update on <use></text> |
| |
| <script type="text/ecmascript"> <![CDATA[ |
| var xlinkNS = 'http://www.w3.org/1999/xlink'; |
| var svgNS = 'http://www.w3.org/2000/svg'; |
| |
| function runTest(){ |
| document.getElementById('x').setAttributeNS(null, 'x', '20'); |
| document.getElementById('y').setAttributeNS(null, 'y', '15'); |
| document.getElementById('transform').setAttributeNS(null, 'transform', 'rotate(20)'); |
| document.getElementById('xlink').setAttributeNS(xlinkNS, 'xlink:href', '#symbol2'); |
| |
| var mutated = document.getElementById('mutatedSymbol'); |
| while(mutated.firstChild != null) { |
| mutated.removeChild(mutated.firstChild); |
| } |
| var r = document.createElementNS(svgNS, 'rect'); |
| r.setAttributeNS(null, "x", "-10"); |
| r.setAttributeNS(null, "y", "-10"); |
| r.setAttributeNS(null, "width", "20"); |
| r.setAttributeNS(null, "height", "20"); |
| r.setAttributeNS(null, "stroke-width", "4"); |
| r.setAttributeNS(null, "stroke", "gold"); |
| r.setAttributeNS(null, "fill", "crimson"); |
| mutated.appendChild(r); |
| |
| var t = document.createElementNS(svgNS, "text"); |
| mutated.appendChild(t); |
| t.setAttributeNS(null, "text-anchor", "middle"); |
| t.setAttributeNS(null, "fill", "gold"); |
| t.setAttributeNS(null, "stroke", "none"); |
| t.setAttributeNS(null, "y", "5"); |
| var msg = document.createTextNode("Hello"); |
| t.appendChild(msg); |
| |
| msg.data = "Hi"; |
| } |
| |
| ]]> </script> <rect id="symbol" x="-10" y="-10" width="20" height="20" /> |
| |
| |
| |
| <defs> |
| <rect id="symbol" x="-10" y="-10" width="20" height="20" /> |
| <rect id="symbol2" x="-10" y="-10" width="20" height="20" stroke-width="4" stroke="gold" fill="crimson" /> |
| |
| <g id="mutatedSymbolReference"> |
| <rect x="-10" y="-10" width="20" height="20" stroke-width="4" stroke="gold" fill="crimson" /> |
| <text text-anchor="middle" y="5" fill="gold" stroke="none">Hi</text> |
| </g> |
| |
| <g id="mutatedSymbol"> |
| <rect x="-12" y="-12" width="24" height="24" class="reference" /> |
| </g> |
| |
| <rect id="titleCell" x="-60" y="-15" width="120" height="20" /> |
| <rect id="tableCell" x="-60" y="-20" width="120" height="40" /> |
| <rect id="button" x="-30" y="-15" width="60" height="20" /> |
| |
| </defs> |
| |
| <style type="text/css"><![CDATA[ |
| use.tableHeader { |
| fill: #eeeeee; |
| stroke: black; |
| } |
| |
| text.tableHeader { |
| text-anchor: middle; |
| stroke: none; |
| fill: black; |
| } |
| |
| use.tableCell { |
| fill: white; |
| stroke: black; |
| } |
| |
| text.tableCell { |
| text-anchor: middle; |
| stroke: none; |
| fill: black; |
| } |
| |
| use.button { |
| fill: #eeeeee; |
| stroke: black; |
| } |
| |
| text.button { |
| fill: black; |
| stroke: none; |
| text-anchor: middle; |
| } |
| |
| .reference { |
| fill: none; |
| stroke: black; |
| } |
| |
| .symbol { |
| fill: gold; |
| stroke: crimson; |
| stroke-width: 4; |
| } |
| |
| ]]></style> |
| |
| <g transform="translate(165, 120)"> |
| <g id="tableHeader" class="tableHeader"> |
| <g> |
| <use class="tableHeader" xlink:href="#titleCell" /> |
| <text class="tableHeader">Attribute</text> |
| </g> |
| |
| <g transform="translate(120,0)"> |
| <use class="tableHeader" xlink:href="#titleCell" /> |
| <text class="tableHeader"><use> and ref</text> |
| </g> |
| |
| </g> |
| |
| <g id="xRow" transform="translate(0,25)"> |
| <g> |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <text class="tableCell">x</text> |
| </g> |
| |
| <g transform="translate(120,0)" > |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <use id="x" x="10" y="5" class="symbol" xlink:href="#symbol"/> |
| <use x="20" y="5" class="reference" xlink:href="#symbol"/> |
| </g> |
| |
| </g> |
| |
| <g id="yRow" transform="translate(0,65)"> |
| <g> |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <text class="tableCell">y</text> |
| </g> |
| |
| <g transform="translate(120,0)" > |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <use id="y" x="10" y="0" class="symbol" xlink:href="#symbol"/> |
| <use x="10" y="15" class="reference" xlink:href="#symbol"/> |
| </g> |
| |
| </g> |
| |
| <g id="transformRow" transform="translate(0,105)"> |
| <g> |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <text class="tableCell">transform</text> |
| </g> |
| |
| <g transform="translate(120,0)" > |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <use id="transform" |
| x="10" y="5" class="symbol" xlink:href="#symbol"/> |
| <use x="10" y="5" transform="rotate(20)" class="reference" xlink:href="#symbol"/> |
| </g> |
| |
| </g> |
| |
| <g id="xlinkRow" transform="translate(0,145)"> |
| <g> |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <text class="tableCell">xlink:href</text> |
| </g> |
| |
| <g transform="translate(120,0)" > |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <use id="xlink" |
| x="5" y="0" class="symbol" xlink:href="#symbol"/> |
| <use x="5" y="0" class="reference" xlink:href="#symbol"/> |
| </g> |
| |
| </g> |
| |
| <g id="mutation" transform="translate(0,185)"> |
| <g> |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <text class="tableCell">mutation</text> |
| </g> |
| |
| <g transform="translate(120,0)" > |
| <use class="tableCell" xlink:href="#tableCell" /> |
| <use id="xlink" |
| x="-25" y="0" class="symbol" xlink:href="#mutatedSymbolReference"/> |
| <use x="25" y="0" class="reference" xlink:href="#mutatedSymbol"/> |
| </g> |
| |
| </g> |
| |
| <g onclick="runTest()" transform="translate(0, 80)"> |
| <use class="button" xlink:href="#button" x="60" y="200" /> |
| <text class="button" x="60" y="200">Run Test</text> |
| </g> |
| </g> |
| |
| |
| |
| <script type="text/ecmascript"><![CDATA[ |
| function onDone() { |
| if (!(regardTestInstance == null)) { |
| regardTestInstance.scriptDone(); |
| } else { |
| alert("This button only works when run in the regard framework"); |
| } |
| } |
| ]]></script> |
| <g id="done" transform="translate(195, 468)" cursor="pointer" onclick="onDone()"> |
| <rect rx="5" ry="5" width="60" height="25" fill="#eeeeee" stroke="black" /> |
| <text x="30" y="18" font-size="14" font-weight="bold" text-anchor="middle">Done</text> |
| </g> |
| |
| |
| </svg> |
| |
