Comment: If the svg code is in html, it will be easier for us to write JavaScript to control the transformation of the graph. Here are some predefined shape elements of svg. Interested friends can refer to it. I hope it will be helpful to you.
SVG files can be embedded in HTML documents via the following tags: <embed>, <object>, or <iframe>.<embed src="rect.svg"height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
The pluginspage property points to the URL of the download plugin.
<object data="rect.svg"width="300"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/"/>
<iframe src="rect.svg"height="100">
</iframe>
Among these three <iframe> is an early tag, and now it is used less. The one that uses more is the <embed> tag.
At the same time, we can also write svg directly into the HTML file:
In this way, you need to first introduce the SVG dtd file:
<?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">
Then fill in the required code in the <svg> tag:
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20"
style="fill:white"/>
</svg>
If the svg code is in html, it will be easier for us to write javascript to control the transformation of the graph:
<script type="text/javascript">
function ccc(){
var a = document.getElementById("w1");
a.style.fill="red";
a.setAttribute("cx", "150"); //Set the value
a.setAttribute("ry", "50"); //Set the value
}
</script>
Here are some predefined shape elements for svg:
Rectangle<rect>
Circle<circle>
ellipse<ellipse>
Line<line>
Polyline<polyline>
Polygon <polygon>
Path <path>