| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" |
| "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You 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. |
| |
| --> |
| <!-- ====================================================================== --> |
| <!-- Modification of text children --> |
| <!-- --> |
| <!-- @author nicolas.socheleau@bitflash.com --> |
| <!-- @version $Id$ --> |
| <!-- ====================================================================== --> |
| |
| <?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?> |
| |
| <svg id="body" width="450" height="500" viewBox="0 0 450 500" |
| xmlns:xlink="http://www.w3.org/1999/xlink" > |
| |
| <defs> |
| <text id="browndef"> brown</text> |
| <path id="pathdef" d="M250,180 C300,250 500,250 500,180" /> |
| <path id="pathdef1" d="M250,380 C300,250 500,250 500,380" /> |
| </defs> |
| |
| <title><text> children 'onload'</title> |
| |
| <text x="50%" y="45" class="title"><text> children in 'onload'</text> |
| |
| <script type="text/ecmascript"><![CDATA[ |
| function remove(evt,target){ |
| var elt = evt.target; |
| var doc = elt.getOwnerDocument(); |
| |
| var remove = doc.getElementById(target); |
| elt = remove.getParentNode(); |
| elt.removeChild(remove); |
| } |
| function addtspan(evt,pos,t,s){ |
| var elt = evt.target; |
| var doc = elt.getOwnerDocument(); |
| |
| var textnode = elt.getFirstChild(); |
| |
| textnode = textnode.splitText(pos); |
| |
| var tspan = doc.createElementNS(elt.getNamespaceURI(),'tspan'); |
| tspan.setAttribute('style',s); |
| |
| var newtextnode = doc.createTextNode(t); |
| |
| tspan.appendChild(newtextnode); |
| |
| elt.insertBefore(tspan,textnode); |
| } |
| function addtref(evt,pos,ref,s){ |
| var elt = evt.target; |
| var doc = elt.getOwnerDocument(); |
| |
| var textnode = elt.getFirstChild(); |
| |
| textnode = textnode.splitText(pos); |
| |
| var tref = doc.createElementNS(elt.getNamespaceURI(),'tref'); |
| tref.setAttribute('style',s); |
| var attr = doc.createAttributeNS("http://www.w3.org/1999/xlink","href"); |
| attr.setValue(ref); |
| tref.setAttributeNodeNS(attr); |
| |
| elt.insertBefore(tref,textnode); |
| |
| |
| } |
| function addtextpath(evt,pos,ref,t,s){ |
| var elt = evt.target; |
| var doc = elt.getOwnerDocument(); |
| |
| var textnode = elt.getFirstChild(); |
| |
| textnode = textnode.splitText(pos); |
| |
| var textPath = doc.createElementNS(elt.getNamespaceURI(),'textPath'); |
| textPath.setAttribute('style',s); |
| |
| var attr = doc.createAttributeNS("http://www.w3.org/1999/xlink","href"); |
| attr.setValue(ref); |
| textPath.setAttributeNodeNS(attr); |
| |
| var newtextnode = doc.createTextNode(t); |
| |
| textPath.appendChild(newtextnode); |
| |
| elt.insertBefore(textPath,textnode); |
| } |
| |
| ]]> |
| </script> |
| |
| <g id="test-content"> |
| <g style="font-size:40" > |
| |
| <text x="70" y="115" style="fill:orange" |
| onload="addtspan(evt,9,' brown','fill:brown')" >the quick fox</text> |
| |
| <text x="70" y="155" style="fill:orange" |
| onload="addtref(evt,9,'#browndef','fill:brown')" >the quick fox</text> |
| |
| <text x="70" y="195" style="fill:orange" |
| onload="addtextpath(evt,9,'#pathdef','brown','fill:brown')" >the quick fox</text> |
| |
| <text x="70" y="315" style="fill:orange" |
| onload="remove(evt,'tspan')" > |
| the quick |
| <tspan id="tspan" style="fill:brown">brown</tspan> |
| fox |
| </text> |
| |
| <text x="70" y="355" style="fill:orange" |
| onload="remove(evt,'tref')" > |
| the quick |
| <tref id="tref" style="fill:brown" xlink:href="#browndef"/> |
| fox |
| </text> |
| |
| <text x="70" y="395" style="fill:orange" |
| onload="remove(evt,'textpath')" > |
| the quick |
| <textPath id="textpath" xlink:href="#pathdef1" style="fill:brown">brown</textPath>fox</text> |
| |
| </g> |
| |
| <g style="stroke:black;fill:none;stroke-width:1;font-size:40"> |
| <text x="70" y="115"> |
| the quick <tspan>brown</tspan> fox |
| </text> |
| <text x="70" y="155"> |
| the quick <tref xlink:href="#browndef" /> fox |
| </text> |
| <text x="70" y="195"> |
| the quick <textPath xlink:href="#pathdef" >brown</textPath> fox |
| </text> |
| <text x="70" y="315"> |
| the quick fox |
| </text> |
| <text x="70" y="355"> |
| the quick fox |
| </text> |
| <text x="70" y="395"> |
| the quick fox |
| </text> |
| </g> |
| |
| <g style="fill:black; stroke:none; text-anchor:middle"> |
| <text x="225" y="230" >insert nodes |
| <tspan style="font-size:8">( <tspan>,<tref>,<textPath> )</tspan> |
| </text> |
| <text x="225" y="430" >remove nodes |
| <tspan style="font-size:8">( <tspan>,<tref>,<textPath> )</tspan> |
| </text> |
| </g> |
| </g> |
| </svg> |