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

  

 

posted @ 2020-03-28 11:37  1156740846  阅读(260)  评论(0编辑  收藏  举报