42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
.cls1 {
|
|
stroke: black;
|
|
fill: rgb(0,128,255);
|
|
stroke-width: 1;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function setup() {
|
|
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
svg.width.baseVal.valueAsString = "400px";
|
|
svg.height.baseVal.valueAsString = "400px";
|
|
svg.viewBox.baseVal.x = 0;
|
|
svg.viewBox.baseVal.y = 0;
|
|
svg.viewBox.baseVal.width = 200;
|
|
svg.viewBox.baseVal.height = 90;
|
|
var ellipse1 = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
|
|
ellipse1.cx.baseVal.value = 50;
|
|
ellipse1.cy.baseVal.value = 50;
|
|
ellipse1.rx.baseVal.value = 30;
|
|
ellipse1.ry.baseVal.value = 10;
|
|
ellipse1.style.setProperty("stroke", "black", "");
|
|
ellipse1.style.setProperty("fill", "red", "");
|
|
var ellipse2 = ellipse1.cloneNode(true);
|
|
ellipse2.cx.baseVal.value = 100;
|
|
|
|
var drawing = document.getElementById("drawing");
|
|
svg.appendChild(ellipse1);
|
|
svg.appendChild(ellipse2);
|
|
drawing.appendChild(svg);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="setup()">
|
|
<p>Here is an html paragraph. And below is a svg drawing. You should see two ellipses.</p>
|
|
<div id="drawing"/>
|
|
</body>
|
|
</html>
|