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">
Rectangle
<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>
Line
<script type="text/javascript"> function ccc(){ var a = document.getElementById("w1"); a.style.fill="red"; a.setAttribute("cx", "150"); //设置值 a.setAttribute("ry", "50"); //设置值 } </script>
Path
The above is the entire content of this chapter. For more related tutorials, please visit
Html5 video tutorial
,
SVG video tutorial
!