svg属性笔记
<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文件