<!DOCTYPE html><!-- saved from url=(0050)http://granite.sru.edu/~ddailey/svg/wordsput2.html --><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><style>div.u{float:top;}div.d{float:top;height:80%}
td{text-align:center;font-family:impact;width:15%;background:#eee}
</style><title>clicking words in HTML and putting them into SVG</title><script>functioninit(){var Ds=document.getElementsByTagName("td")
for (i=0;i<Ds.length;i++) {
Ds[i].onclick=function(){add(this)}
Ds[i].id=Ds[i].firstChild.nodeValue
}
D=document.getElementById("E")
SVGDoc=D.getSVGDocument()
SVGRoot=SVGDoc.documentElement
svgns="http://www.w3.org/2000/svg"
}
functionadd(o){var word=o.firstChild.nodeValue
var T=SVGDoc.createElementNS(svgns,"text")
var MsgNode=SVGDoc.createTextNode(word)
var fontratio=0.05var adj=(1 - fontratio)
x=Math.random()*.9 - 2*fontratio
y=Math.random()*.5
T.setAttribute("x",x)
T.setAttribute("y",y)
T.setAttribute("font-size",fontratio)
T.setAttribute("font-family","serif")
//alert(word) //Safari 5 shows the alert but not what //follows; Chrome doesn't get this far
T.appendChild(MsgNode)
SVGRoot.appendChild(T)
}
functionrespond(evt){var w=evt.target.firstChild.nodeValue
document.getElementById(w).style.background="red"
}
</script><styleid="ChromeStylist-pabfempgigicdjjlccdgnbmeggkbjdhd">body{background-color:#E0FFE7!important;}</style><style>@media print {#ghostery-purple-box{display:none !important}}</style></head><bodyonload="init()"><divalign="center"class="u"><tableborder="1"><tbody><tr><tdid="artichoke">artichoke</td><tdid="balustrade">balustrade</td><tdid="canteloupe">canteloupe</td><tdid="dandelion">dandelion</td></tr><tr><tdid="elephant">elephant</td><tdid="familiar">familiar</td><tdid="groundhog">groundhog</td><tdid="Hydrophlorone">Hydrophlorone</td></tr></tbody></table>
Click on any word above or below
</div><hr><divclass="d"><embedname="E"id="E"src="./simplerectscript.svg"width="100%"height="100%"></div></body></html>
<svgxmlns="http://www.w3.org/2000/svg"width="100%"xmlns:xlink="http://www.w3.org/1999/xlink"><script><![CDATA[
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"functionColor(){var R=parseInt(Math.random()*255)
var G=parseInt(Math.random()*255)
var B=parseInt(Math.random()*255)
return"rgb("+R+","+G+","+B+")"
}
Root=document.documentElement
var lastOne=Root
functionadd(evt){var G=document.getElementById("C")
// 复制节点,包括其子节点var NG=G.cloneNode("true")
var C=NG.firstChild
C.setAttribute("cx", evt.clientX)
C.setAttribute("cy", evt.clientY)
C.setAttribute("fill", Color())
Root.appendChild(NG)
lastOne=C
}
functioncontent(){if (lastOne.nodeName!="circle") returnvar x=lastOne.getAttribute("cx")
var y=lastOne.getAttribute("cy")
var T=document.createElementNS(xmlns,"text")
//附加文字时,需要先创建一个textnode附加到text上, 然后将text节点附加到被附加的元素上
Msg=document.createTextNode(Math.floor(Math.random()*10))
T.appendChild(Msg)
T.setAttribute("x", x-10)
// 由于+号有拼接字符串的功能,所以需要使用parseInt将其转化为数值
T.setAttribute("y", parseInt(y)+50)
T.setAttribute("font-size", 36)
T.setAttribute("fill", "black")
lastOne.parentNode.appendChild(T)
lastOne=lastOne.parentNode.previousSibling.firstChild
}
functioncolorit(){if (lastOne.nodeName!="circle") return
lastOne.setAttribute("fill",Color())
}
functionremove(evt){
lastOne=evt.currentTarget.previousSibling.firstChild
Root.removeChild(evt.currentTarget)
}
]]></script><defs><gid="C"onclick="remove(evt)"><circler="20"fill-opacity=".5"stroke="black"stroke-width="2"stroke-dasharray="8,4"/></g></defs><rectwidth="100%"height="100%"fill="white"onclick="add(evt)"/><rectx="15"y="20"height="50"width="235"stroke="#800"stroke-width="2"fill="grey"opacity=".65"></rect><textx="27"y="40"font-size="12"font-family="arial"fill="#800">Click on blank space to add something</text><textx="49"y="60"font-size="12"font-family="arial"fill="#800">Click something to get rid of it</text><textx="40"y="100"font-size="12"font-family="arial"fill="black">Click here to add content to last</text><rectx="30"y="80"height="30"width="200"onclick="content()"stroke="black"stroke-width="2"fill="blue"opacity=".35"rx="10"></rect><textx="40"y="140"font-size="12"font-family="arial"fill="black">Click here to change color of last</text><rectx="30"y="120"height="30"width="200"onclick="colorit()"stroke="blue"stroke-width="2"fill="red"opacity=".35"rx="10"></rect></svg>