XML/SVG/JavaScript — различия между версиями
(нет различий)
|
Версия 21:22, 25 мая 2010
Содержание
Adding an SVG Element via ECMAScript
<source lang="xml">
<?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 width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script type="text/ecmascript"> var rectNode = null; var parent = null; var svgDocument = null; function remove(event) { rectNode = event.target; parent = rectNode.parentNode; parent.removeChild(rectNode); svgDocument = parent.getOwnerDocument(); circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("style","fill:blue"); circleNode.setAttribute("cx", "100"); circleNode.setAttribute("cy", "100"); circleNode.setAttribute("r", "100"); parent.appendChild(circleNode); } </script> <g transform="translate(50,50)"> <text id="text1" font-size="24" fill="blue"> Click inside the rectangle: </text> </g> <g transform="translate(50,100)"> <rect onclick="remove(evt)" fill="red" x="0" y="0" width="200" height="100"/> </g> </svg> </source>
Determining Attribute Values of SVG Elements
<source lang="xml">
<?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 width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script type="text/ecmascript"> function showAttributes(event){ var msg = ""; var theRect = event.target; var theParent = theRect.parentNode; var theID = theRect.getAttribute("id"); var xPosition = theRect.getAttribute("x"); var yPosition = theRect.getAttribute("y"); var theWidth = theRect.getAttribute("width"); var theHeight = theRect.getAttribute("height"); msg += "Rectangle ID: " + theID + "\n"; msg += "x coordinate: " + xPosition + "\n"; msg += "y coordinate: " + yPosition + "\n"; msg += "width: " + theWidth + "\n"; msg += "height: " + theHeight + "\n"; alert(msg); } </script> <g transform="translate(50,50)"> <text id="text1" font-size="24" fill="blue"> Click inside the rectangle: </text> </g> <g transform="translate(50,100)"> <rect id="rect1" fill="red" onclick="showAttributes(evt)" x="10" y="10" width="200" height="100"/> </g>
</svg>
</source>
Dynamically Removing an SVG Element
<source lang="xml">
<?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 width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script type="text/ecmascript"> function remove(event) { var rectangle = event.target; var parent = rectangle.parentNode; parent.removeChild(rectangle); } </script> <g transform="translate(50,50)"> <text font-size="24" fill="blue"> Click inside the rectangle: </text> </g> <g transform="translate(50,100)"> <rect onclick="remove(evt)" fill="red" x="0" y="0" width="200" height="100"/> </g>
</svg>
</source>
Mouse Clicks and Resizing Circles
<source lang="xml">
<?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 width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"> <desc>Capture mouse click events</desc> <script type="text/ecmascript"> function mouseClick1(evt) { var circle = evt.target; var currentRadius = circle.getAttribute("r"); if(currentRadius == 50) { circle.setAttribute("r", currentRadius*2); circle.setAttribute("fill", "#FF0000"); }else{ circle.setAttribute("r", currentRadius*0.5); circle.setAttribute("fill", "#FFFF00"); } } </script> <g transform="translate(50,40)"> <text x="0" y="0" font-size="30"> Click inside the circle </text> </g> <g transform="translate(20,90)"> <rect x="0" y="0" width="500" height="300" fill="#CCCCCC" stroke="blue"/> <circle onclick="mouseClick1(evt)" cx="250" cy="150" r="50" fill="blue"/> </g>
</svg>
</source>
Mouse Clicks and Scaled Ellipses
<source lang="xml">
<?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 width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"> <script type="text/ecmascript"> function mouseClick1(event) { var ellipse = event.target; var currentXRadius = ellipse.getAttribute("rx"); if(currentXRadius == 120) { ellipse.setAttribute("rx", currentXRadius*2); ellipse.setAttribute("fill", "#FF0000"); } else { ellipse.setAttribute("rx", currentXRadius*0.5); ellipse.setAttribute("fill", "#FFFF00"); } } </script> <g transform="translate(20,50)"> <text x="0" y="0" font-size="30"> Click on the moving ellipse </text> </g> <g transform="translate(50,100)"> <rect x="0" y="0" width="500" height="400" fill="#CCCCCC" stroke="blue"/> <ellipse onclick="mouseClick1(evt)" cx="250" cy="200" rx="120" ry="60" fill="blue"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="0" to="1" begin="0s" dur="4s"/> </ellipse> </g>
</svg>
</source>