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

      

  • 相关阅读:
    [CentOS7] 安装sogou输入法
    [CentOS7] vncviewer与windows之间的复制粘贴
    linux solr7.2+tomcat8 详细部署整合
    linux solr 安装
    linux dubbo-admin-2.6.0 环境搭建
    linux tomcat安装
    linux jdk安装
    linux Nginx-1.10.2 安装部署教程
    linux技巧---创建应用快捷方式
    linux MySQL 5.7+keepalived 主备服务器自主切换
  • 原文地址:https://www.cnblogs.com/LcxSummer/p/12586474.html
Copyright © 2011-2022 走看看