zoukankan      html  css  js  c++  java
  • svg入门

    SVG意为可缩放矢量图形,使用xml格式定义图形。

    预定义的图形形状:矩形<rect>、圆形<circle>、椭圆<ellipse>、线<line>、折线<polyline>、多边形<polygon>、路径<path>、图片<image>

    举例1:

    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

      <--矩形-->

      <rect width="300" height="100" style="fill:#0000ff;stroke:black;stroke-1;" />

      <--图像-->

      <image xlink:href="1.jpg" x="400" y="200" width="60" height="60"></image>

    </svg>

    举例2:

    <!DOCTYPE html>
    <html>
    <head>
    <title>svg</title>
    </head>
    <body>
    <div>
    <svg>
    <g transform="translate(20,15)">
    <rect style="fill:pink" rx="5" ry="5" width="60" height="40"></rect>
    <g transform="translate(10,20)">
    <text>矩形</text>
    </g>
    </g>
    <g transform="translate(110,150)">
    <circle r="50" stroke="green" stroke-width="2" fill="cyan"></circle>
    <g transform="translate(-10,-20)">
    <text>圆形</text>
    </g>
    </g>
    </svg>
    </div>
    <div>
    <svg width="100%" height="100%" version="1.1">
    <rect width="300" height="100" style="fill:#0000ff;stroke:black;stroke-1;" />
    <image xlink:href="1.jpg" x="400" y="200" width="60" height="60" />
    </svg>
    </div>
    </body>
    </html>

  • 相关阅读:
    js forEach方法
    day1总结
    jupyter notebook
    java_13网络编程
    原生 input radio 优化
    JQ 获取 input file 图片 显示在对应位置
    math.js 使用
    前端优化
    文字动态颜色变化效果
    谷歌,火狐隐藏滚动条
  • 原文地址:https://www.cnblogs.com/feilv/p/4075962.html
Copyright © 2011-2022 走看看