106 lines
4.3 KiB
XML
106 lines
4.3 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" onload="init()">
|
|
|
|
<script>
|
|
function init()
|
|
{
|
|
var point = document.rootElement.createSVGPoint();
|
|
|
|
// Test initial values
|
|
if (point.x == 0) {
|
|
document.getElementById("test1").setAttribute("fill", "green");
|
|
}
|
|
if (point.y == 0) {
|
|
document.getElementById("test2").setAttribute("fill", "green");
|
|
}
|
|
|
|
// Assign new values from local function
|
|
point.x = 100;
|
|
point.y = 200;
|
|
if (point.x == 100) {
|
|
document.getElementById("test3").setAttribute("fill", "green");
|
|
}
|
|
if (point.y == 200) {
|
|
document.getElementById("test4").setAttribute("fill", "green");
|
|
}
|
|
|
|
// Assign new values from external function
|
|
assignValues(point);
|
|
if (point.x == 300) {
|
|
document.getElementById("test5").setAttribute("fill", "green");
|
|
}
|
|
if (point.y == 400) {
|
|
document.getElementById("test6").setAttribute("fill", "green");
|
|
}
|
|
|
|
// Create new point in external function, check values
|
|
var newPoint = createNewPoint();
|
|
if (newPoint.x == 66) {
|
|
document.getElementById("test7").setAttribute("fill", "green");
|
|
}
|
|
if (newPoint.y == 666) {
|
|
document.getElementById("test8").setAttribute("fill", "green");
|
|
}
|
|
|
|
// Check swapping of point objects
|
|
var savedPoint = point;
|
|
point = newPoint;
|
|
if (point.x == 66) {
|
|
document.getElementById("test9").setAttribute("fill", "green");
|
|
}
|
|
if (point.y == 666) {
|
|
document.getElementById("test10").setAttribute("fill", "green");
|
|
}
|
|
|
|
point = savedPoint;
|
|
if (point.x == 300) {
|
|
document.getElementById("test11").setAttribute("fill", "green");
|
|
}
|
|
if (point.y == 400) {
|
|
document.getElementById("test12").setAttribute("fill", "green");
|
|
}
|
|
|
|
// Modifying savedPoint, should also modify point
|
|
savedPoint.x = 150;
|
|
savedPoint.y = 250;
|
|
|
|
if (point.x == 150) {
|
|
document.getElementById("test13").setAttribute("fill", "green");
|
|
}
|
|
if (point.y == 250) {
|
|
document.getElementById("test14").setAttribute("fill", "green");
|
|
}
|
|
}
|
|
|
|
function assignValues(p)
|
|
{
|
|
p.x = 300;
|
|
p.y = 400;
|
|
}
|
|
|
|
function createNewPoint()
|
|
{
|
|
var point = document.rootElement.createSVGPoint();
|
|
point.x = 66;
|
|
point.y = 666;
|
|
return point;
|
|
}
|
|
</script>
|
|
|
|
<rect id="test1" transform="translate(0, 0)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test2" transform="translate(0, 30)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test3" transform="translate(0, 60)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test4" transform="translate(0, 90)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test5" transform="translate(0, 120)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test6" transform="translate(0, 150)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test7" transform="translate(0, 180)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
|
|
<rect id="test8" transform="translate(110, 0)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test9" transform="translate(110, 30)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test10" transform="translate(110, 60)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test11" transform="translate(110, 90)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test12" transform="translate(110, 120)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test13" transform="translate(110, 150)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
<rect id="test14" transform="translate(110, 180)" x="0" y="0" width="100" height="20" fill="red"/>
|
|
</svg>
|