zoukankan      html  css  js  c++  java
  • svg属性笔记

    <html lang="en"><head>
        <meta charset="UTF-8">
        <title>LCX</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            
            body,html,svg{
                height: 100%;
                 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-5;opacity:1"> <div style="padding: 10px;"> <span>x坐标:</span> <input type="text" style=" 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文件

      

  • 相关阅读:
    js中不同的height, top的对比
    正则表达式入门以及记录
    CSS小记(持续更新......)
    Git远程操作
    Git Push 避免用户名和密码方法
    Git本地操作
    CSS3动画属性
    c语言文法
    实验一、词法分析器实验
    词法分析器
  • 原文地址:https://www.cnblogs.com/LcxSummer/p/12586474.html
Copyright © 2011-2022 走看看