• SVG初识


    SVG 意为可缩放矢量图形(Scalable Vector Graphics)

    个人认为现在svg可能有点过时了,svg的很多功能css3或者canvas都能做到很好的效果,

    但是刚刚研究了一下还是看到了一些很实在的写法。

    优势:

    • SVG 图像可通过文本编辑器来创建和修改
    • SVG 图像可被搜索、索引、脚本化或压缩
    • SVG 是可伸缩的
    • SVG 图像可在任何的分辨率下被高质量地打印
    • SVG 可在图像质量不下降的情况下被放大
    • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

    这些优势是官方给出的,对于前端来说优势比较明确的可能是可操作的dom结构

    svg一般使用的场景:

    1,划一条直线:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-2" />
    </svg>

    2,一个圆

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>

    3.椭圆

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <ellipse cx="100" cy="80" rx="200" ry="50" style="fill:yellow;stroke:purple;stroke-2" />
    </svg>

    4,一个五角星

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-5;fill-rule:nonzero;"/>
    </svg>

     5,折线

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-3" />
    </svg>

    6,路径上文字

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
    </defs>
    <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
    </text></svg>

    7,动画文字

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> It's SVG!
    <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze" />
    </text>
    </g>
    </svg>

    还有各种滤镜,虚化,动画等等。大部分都是css3动画可以实现的了

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3o2gu4wiqq68k

  • 相关阅读:
    C#根据html生成PDF
    Oracle 存储过程异常处理
    Oracle事务之一:锁和隔离
    跨域解决方案一:使用CORS实现跨域
    AJAX POST&跨域 解决方案
    使用 jQuery Deferred 和 Promise 创建响应式应用程序
    jQuery:多个AJAX/JSON请求对应单个回调并行加载
    解决td标签上的position:relative属性在各浏览器中的兼容性问题
    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
    JQuery-UI Dialog下使用服务器端按钮失效
  • 原文地址:https://www.cnblogs.com/937522zy/p/9579097.html
Copyright © 2020-2023  润新知