zoukankan      html  css  js  c++  java
  • svg从入门到装逼

    svg文件是基于xml的矢量图,而canvas是基于html和js的位图。关于两者的比较,在粗就不赘述了。

    1.  首先来上一个svg的基本结构:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg">
    
        <!-- svg的文件内容 -->
    
    </svg>

    doctype要引入的是svg文件规范的DTD,svg标签的xmlns表示的是要遵循W3C的svg规范。

    2. svg的引入方式

    ***可通过img标签引入

    ***可通过iframe标签引入

    ***可通过背景图片引入svg

    ***svg标签直接引入

       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <circle cx="100" cy="100" r="40" fill="red"></circle>
        </svg>

    3. 常见的图形

    (1) 圆形

    <circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
    <circle cx="100" cy="100" r="40" style="fill:white;stroke:black;stroke-5;"></circle>

    (2)方形(rx,ry设置圆角)

    <rect width="200" height="200" x="100" y="100" fill="red" rx="30"></rect>

    (3)直线(x1,y1,x2,y2为线段两个端点的坐标; stroke-opacity为透明度)

    <line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-width="5" stroke-opacity
    ="0.5"></line>

    4. svg常用标签

    (1) 分组标签<g>

    <!-- g标签上只能写所有图形共有的属性,位置移动常用transform属性 -->
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <g transform="translate(200, 200)" stroke-width="5" stroke="red">
                <circle r="40" fill="transparent"></circle>
                <circle r="30" fill="transparent"></circle>
                <circle r="20" fill="transparent"></circle>
                <circle r="10" fill="transparent"></circle>
            </g>
        </svg>

    效果如下

    (2)文字标签<text>

        <!-- text-anchor="middle" 水平居中  strat 以尾部对齐  end以开始对齐 -->
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <g style="cursor:pointer">
                <circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stroke-width="5" ></circle>
                  <text x="200" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
            </g>
        </svg>

    5. 纯html实现基础svg结构组(实际开发中常用js动态生成,本次先来个基础的小demo)

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <g style="cursor:pointer">
                <line x1="100" y1="100" x2="390" y2="200" stroke="#ccc"></line>
                <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>
                <rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>
                <text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text>    
            </g>
            <g style="cursor:pointer">
                <circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>
                <text x="100" y="108" font-size="20" text-anchor="middle">易车网</text>
            </g>
            <g style="cursor:pointer">
                <circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>
                <text x="390" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
            </g>
        </svg>
  • 相关阅读:
    Linux -- 如何减少IO过程中的CPU copy
    Linux -- 在多线程程序中避免False Sharing
    智能文件选择列表—— bat 批处理
    Windows NTFS 符号链接 与 Linux 软连接
    【2017.12.12】deepin安装U盘制作,支持 BIOS+UEFI,deepin_Recovery+Win PE
    Qt creator中文输入—fctix-qt5 源码编译 libfcitxplatforminputcontextplugin.so
    安装 Qt 及所需 gcc 等
    虚拟机安装 deepin Linux 注意事项
    deepin 常用设置
    VIM常用快捷键
  • 原文地址:https://www.cnblogs.com/pomelott/p/8903632.html
Copyright © 2011-2022 走看看