<html lang="en"><head>
<meta charset="UTF-8">
<title>LCX</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html,svg{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 2550 3300">
<g fill="#006837" fill-opacity="0.25" stroke-opacity="0.25" stroke="white" stroke-width="4">
<rect y="2000" width="600" height="600" x="1000" transform="rotate(45 1300 2300)" /> 以中心点为中心旋转
<rect y="2000" width="600" height="600" x="1000" transform="rotate(45 1000 2000)" /> 以顶点为中心点旋转
<rect y="2000" width="600" height="600" x="1000" transform="rotate(45)" /> 以坐标原点0,0为中心点旋转
</g>
</svg>
</body></html>
<rect stroke-dasharray="100,50,20,20,20,50" stroke-width="15" y="1000" width="1000" height="1000" x="1000" transform="rotate(45)" stroke="black"> </rect> 边框虚线
<foreignObject x="20" y="200" width="260" height="160" fill="green"
style="background:blue;fill:green;border:1px solid #000;stroke:pink;stroke-width:5;opacity:1"> <div style="padding: 10px;"> <span>x坐标：</span> <input type="text" style="width: 100px;" /> </div> </foreignObject> 可以插入html代码到svg中
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"> <script type="application/ecmascript" href="svg.move.js"/> </svg> svg中可以插入js文件
原文：https://www.cnblogs.com/LcxSummer/p/12586474.html