Introduction to using SVG and SVG predefined shape elements in HTML

If the svg code is in html, it is easier for us to write javascript to control the transformation of graphics. Here we introduce some predefined shape elements of svg. Friends who are interested can refer to it. I hope it will be helpful to everyone. .

SVG files can be embedded in HTML documents using the following tags: ,

<embed src="rect.svg" width="300"height="100" 
type="image/svg+xml" 
pluginspage="http://www.adobe.com/svg/viewer/install/"/>

pluginspage attribute points to the URL to download the plug-in.

<object data="rect.svg"width="300" height="100" 
type="image/svg+xml" 
codebase="http://www.adobe.com/svg/viewer/install/"/> 
<iframe src="rect.svg" width="300"height="100"> 
</iframe>

Among the three,

If the svg code is in html, it is easier for us to write javascript to control the transformation of the graphics:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Here are some predefined shape elements of SVG:

Rectangle

Circle

<svg width="100%" height="100%" version="1.1" 
xmlns="http://www.w3.org/2000/svg" onclick="ccc();"> 
<ellipse cx="240" cy="100" rx="220" ry="30" 
style="fill:yellow"/> 
<ellipse cx="220" cy="100" rx="190" ry="20" id="w1" 
style="fill:white"/> 
</svg>

Ellipse

Line

Polyline

<script type="text/javascript"> 
function ccc(){ 
var a = document.getElementById("w1"); 
a.style.fill="red"; 
a.setAttribute("cx", "150"); //设置值 
a.setAttribute("ry", "50"); //设置值 
} 
</script>

Polygon

Path

The above is the entire content of this chapter. For more related tutorials, please visit
Html5 video tutorial
,
SVG video tutorial
!