Svg part 5

HTML Fundamentals
HTML5
SVG
14
5/5
         

<ellipse> and <polygon>



Ellipse
The <ellipse> is similar to the <circle>, with one exception: 
You can independently change the horizontal and vertical axes of its radius, using the rx and ry attributes.
<svg height="500" width="1000">
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />
</svg>Try It Yourself

Result:

Polygon 
The <polygon> element is used to create a graphic with at least three sides. The polygon element is unique because it automatically closes off the shape for you.
<svg width="2000" height="2000">
<polygon points="100 100, 200 200, 300 0"
style="fill: green; stroke:black;" />
</svg>Try It Yourself

Result:
Polygon comes from Greek. "Poly" means "many" and "gon" means "angle."

Comments

Post a Comment

Popular posts from this blog

Drag&Drop API

Making Elements Draggable The drag and drop feature lets you "grab" an object and drag it to a different location. To make an element draggable, just set the  draggable  attribute to true: <img draggable =" true " /> Any HTML element can be draggable. The API for HTML5 drag and drop is event-based. Example: <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop ="drop(event)" ondragover ="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div> <img id="image" src="sample...
Read more