zoukankan      html  css  js  c++  java
  • 614 svg入门案例:绘制点、矩形、直线和圆形

    入门案例:绘制点、矩形、直线和圆形


    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <svg width="800" height="800">
          <rect
            width="50"
            height="50"
            style="fill:red;stroke-0;stroke:rgb(0,0,0);"
          />
          <line 
            x1="100" 
            y1="100" 
            x2="250" 
            y2="75"
            style="stroke:blue;stroke-1"
          />
          <line 
            x1="250" 
            y1="75" 
            x2="300" 
            y2="100"
            style="stroke:blue;stroke-1"
          />
          <circle 
            cx="200" 
            cy="200" 
            r="50" 
            stroke="green"
            stroke-width="2" 
            fill="red"
          />
          <line 
            x1="300" 
            y1="300" 
            x2="301" 
            y2="301"
            style="stroke:red;stroke-1"
          />
        </svg>
      </body>
    </html>
    

    <!DOCTYPE html>
    <html>
    
    <head></head>
    
    <body>
      <svg width="800" height="800">
        <!-- 矩形 -->
        <rect width="50" height="50" style="fill:red;" />
    
        <!-- 线段,起点、终点/中间点坐标 -->
        <line x1="100" y1="100" x2="250" y2="75" style="stroke:blue;stroke- 1;" />
        <line x1="250" y1="75" x2="300" y2="100" style="stroke:blue;stroke- 1;" />
    
        <!-- 圆形,和上面写style是一样的 -->
        <circle cx="200" cy="200" r="50" stroke="green" stroke-width="2" fill="red" />
        
        <!-- 点 -->
        <line x1="300" y1="300" x2="301" y2="301" style="stroke:red;stroke- 1;" />
      </svg>
    </body>
    
    </html>
    

    思考:你能否总结出 svg 绘图的流程?

    1. 编写 svg 标签,指定宽高
    2. 编写 svg 绘图标签
    3. 编写绘图属性和样式

    TIP

    svg 参考手册

  • 相关阅读:
    信用卡:银联,VISA,MasterCard
    Syncthing vs BitTorrent Sync
    语言代码
    ATMEL精妙的IRQ中断处理过程
    CAN 总线通信控制芯片SJA1000 的读写
    ARM ® and Thumb ®-2 指令系统
    DeJaVu update history
    74系列的型号
    2007 Audi A4 INSTRUMENT CLUSTER WIRING DIAGRAM
    0-10岁儿童体重、身高参考值
  • 原文地址:https://www.cnblogs.com/jianjie/p/14410818.html
Copyright © 2011-2022 走看看