Admin: 1 версия

2010-05-26T08:25:54Z

1 версия

в 18:22, 25 мая 2010

2010-05-25T18:22:29Z

Новая страница

==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>

← Предыдущая	Версия 08:25, 26 мая 2010
(нет различий)

XML/SVG/JavaScript - История изменений

Admin: 1 версия

в 18:22, 25 мая 2010