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: d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95, or d5ba1642137c3f32f4f4493ae923989c. The

<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, d5ba1642137c3f32f4f4493ae923989c is an earlier tag and is used less now. The most commonly used tag is the d8e2720730be5ddc9c2a3782839e8eb6 tag. 825a130302ffc3fda1c98272b6043b3f Fill in the required code in the tag:

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:

Rectangle4f5c91326734be5b874f0369b6cec59d

Circle30de22e41cb8eb8fbfdc1f091d85e4be

<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>

Ellipsed9b42b40d0fdc429c7c48871eea4816c

Line15a73cc5312745b1b00671f6e690e36a

Polylinece803ba1a4290bddb3ba9c6f57d4c9b4

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

Polygon6f1cb7f8499a7e0f625f982868cbc44d

Path98953a78f52873edae60a617ec082494

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