Tenemos dos métodos para modificar el contenido de un fichero SVG mediante Scripting:
Considerando el documento como un fichero XML estándar y utilizando DOM para su manipulación.
Considerando el documento como un fichero específico SVG y utlizando el modelo de objetos de SVG para su manipulación.
Funciones de ejemplo para el de DOM.-
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd
">
<svg xmlns="http://www.w3.org/2000/svg
" xmlns:xlink="http://www.w3.org/1999/xlink
"
width="300" height="300"
onload="pinta()">
<script type="text/ecmascript">
<![CDATA[
function pinta() {
var
circleNode = svgDocument.createElement("circle");
circleNode.setAttribute("cx", 300*Math.random());
circleNode.setAttribute("cy", 300*Math.random());
circleNode.setAttribute("r", 30);
circleNode.setAttribute("style", "stroke: none; " +
"opacity: 0.3; " +
"fill: rgb(" + 255*Math.random() + "," +
255*Math.random() + "," +
255*Math.random() +
");");
setTimeout("window.pinta()", 300);
document.getElementById("dr").appendChild(circleNode);
}
]]>
</script>
<g id="dr" />
</svg>
Figure 20. scripting-dom.svg
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd
">
<svg xmlns="http://www.w3.org/2000/svg
" xmlns:xlink="http://www.w3.org/1999/xlink
"
width="236" height="295">
<script type="text/ecmascript"><![CDATA[
var drag = false;
var dx = 0;
var dy = 0;
var x = 0;
var y = 0;
var frame =
document.documentElement.getElementById("frame");
var filtered =
document.documentElement.getElementById("filtered");
var clip =
document.documentElement.getElementById("clipRecorte");
frame.addEventListener("mousedown", mousedown_listener,
false);
frame.addEventListener("mouseup",
mouseup_listener, false);
frame.addEventListener("mousemove", mousemove_listener,
false);
function
mousedown_listener(evt) {
drag =
true;
dx =
filtered.getAttribute("x") - evt.clientX;
dy =
filtered.getAttribute("y") - evt.clientY;
}
function
mouseup_listener(evt) {
drag =
false;
alert('x: '
+ filtered.getAttribute("x") + ', ' +
'y: ' + filtered.getAttribute("y"));
}
function
mousemove_listener(evt) {
if (drag)
{
x = evt.clientX + dx;
y = evt.clientY + dy;
filtered.setAttribute("x", x);
filtered.setAttribute("y", y);
clip.getChildNodes().item(1).setAttribute("d",
"M" + x + ","
+ y + " " +
"L" + (100+x) + "," + y + " "
+
"L" + (100+x) + "," + (100+y) + " " +
"L" + x + "," + (100+y) + "
Z");
}
}
]]>
</script>
<defs>
<clipPath id="clipRecorte">
<path d="M0,0 L100,0 L100,100
L0,100 Z" />
</clipPath>
</defs>
<g id="target">
<image width="236" height="295"
xlink:href="wilber-wizard.png" opacity="0.3" />
<image width="236" height="295"
xlink:href="wilber-wizard.png"
clip-path="url(#clipRecorte)" />
<g id="frame">
<rect id="filtered" width="100"
height="100"
style="fill: red; fill-opacity: 0; stroke: red; stroke-width:
1;
shape-rendering: optimizeSpeed;" />
</g>
</g>
</svg>
Figure 21. scripting-recorte.svg
Funciones de ejemplo para el uso del modelo de objetos de SVG
function init().-
{
transform_list =
document.getElementById('all').transform.baseVal;
svg_element =
document.getElementById('all').ownerSVGElement;
}
function Rotate() {
var xform =
document.getElementById('foo').createSVGTransform();
xform.setRotate(30,50,300);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
function Translate() {
var xform =
document.getElementById('foo').createSVGTransform();
xform.setTranslate(10,-10);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
function Scalein() {
var xform =
document.getElementById('foo').createSVGTransform();
xform.setScale(1.5,1.5);
transform_list.appendItem(xform);
}
function Scaleout() {
var xform =
document.getElementById('foo').createSVGTransform();
xform.setScale(0.5,0.5);
var id = svg_element.suspendRedraw(1000);
transform_list.appendItem(xform);
svg_element.unsuspendRedraw(id);
}
function DOMTest() {
var p =
document.getElementById('barx').points.getItem(0);
for (var i=50;i<250;++i) {
p.x = i;
}
}
function DOMTest2() {
var p =
document.getElementById('bary').points.getItem(0);
for (var i=50;i<250;++i) {
p.y = i;
}
}
Hay 35 opiniones. Opina sobre este curso.
| Cursos | Valoración | Alumnos | Vídeo | |
|---|---|---|---|---|
|
Corel Draw 11 Básico Corel Draw es una potente herramienta que utilizan los diseñadores profesionales para crear, logotipos, esquemas, ilustraciones, dibujos, etc. No se asuste, para usted am... [10/05/05] |
|
11.987 | ||
|
Cómo eliminar los ojos rojos con PhotoShop En esta práctica conoceremos los pasos necesarios para poder eliminar los ojos rojos de una fotografía.... [26/05/08] |
|
2.155 |
|
|
|
Cómo crear marcos de fotografías en Photoshop En este curso, mediante el programa Photoshop, aprenderás a crear marcos para tus fotografías, de la manera más práctica, a través de unos sencillos procedimientos. Apren... [04/07/08] |
|
1.601 |
|
|
Publicar en
del.icio.us
digg
meneame