private static void Test2()
{
var container = "div".AttachToDocument();
container.style.border = "1px solid red";
container.style.width = "400px";
container.style.height = "300px";
container.style.display = IStyle.DisplayEnum.inline_block;
var svg = new ISVGSVGElement();
var layer = new ISVGGElement();
var defs = new ISVGElementBase("defs");
var radialGradient = new ISVGElementBase("radialGradient");
radialGradient.id = "myRadGrad";
radialGradient.setAttribute("r", "10%");
radialGradient.setAttribute("spreadMethod", "reflect");
var stop1 = new ISVGElementBase("stop");
stop1.setAttribute("offset", "5%");
stop1.setAttribute("stop-color", "red");
stop1.setAttribute("stop-opacity", "0.8");
radialGradient.appendChild(stop1);
var stop2 = new ISVGElementBase("stop");
stop2.setAttribute("offset", "95%");
//stop2.setAttribute("stop-color", "blue");
stop2.setAttribute("stop-opacity", "0.0");
radialGradient.appendChild(stop2);
defs.appendChild(radialGradient);
var rect = new ISVGRectElement();
rect.setAttribute("x", 0);
rect.setAttribute("y", 0);
rect.setAttribute("width", "100%");
rect.setAttribute("height", "100%");
rect.setAttribute("fill", "url(#myRadGrad)");
layer.appendChild(defs, rect);
svg.appendChild(layer);
container.appendChild(svg);
}
private static void Test1()
{
var container = "div".AttachToDocument();
container.style.border = "1px solid red";
container.style.width = "400px";
container.style.height = "300px";
var svg = new ISVGSVGElement();
var layer = new ISVGGElement();
var text = new ISVGTextElement();
var rect = new ISVGRectElement();
rect.setAttribute("x", 70);
rect.setAttribute("y", 20);
rect.setAttribute("rx", 0);
rect.setAttribute("ry", 0);
rect.setAttribute("width", 160);
rect.setAttribute("height", 160);
rect.setAttribute("fill", "blue");
text.setAttribute("x", "92");
text.setAttribute("y", "32");
text.setAttribute("fill", "red");
//text.style.cursor = IStyle.CursorEnum.move;
var img = new ISVGImageElement();
img.href = new SimpleSVGexample.HTML.Images.FromAssets.TILE1436().src;
img.setAttribute("x", 0);
img.setAttribute("y", 0);
img.setAttribute("width", 200);
img.setAttribute("height", 200);
// http://www.svgbasics.com/rotate.html
img.setAttribute("transform", "rotate(-45 10 10)");
var r = 0;
(1000 / 20).AtInterval(
delegate
{
r++;
img.setAttribute("transform", "rotate(" + r + " 100 100)");
}
);
var rectlayer = new ISVGGElement();
rectlayer.appendChild(rect, text);
//rectlayer.setAttribute("transform", "scale(0.5) translate(0, 0) rotate(45) skewX(20) skewY(5)");
var tween = new TweenDataDouble();
tween.Value = 1;
tween.ValueChanged +=
delegate
{
rectlayer.setAttribute("opacity", tween.Value);
};
rectlayer.onmouseover +=
delegate
{
tween.Value = 0.5;
};
rectlayer.onmouseout +=
delegate
{
tween.Value = 1;
};
text.textContent = "hello world";
layer.appendChild(rectlayer, img);
svg.appendChild(layer);
container.appendChild(svg);
}