SVG

作者: akubaba | 来源:发表于2017-11-04 23:05 被阅读9次

Android图片之svg
SVG的使用
资源
(第六天)HTML5之SVG的了解与使用&Web数据存储
svg standalone
SVG学习笔记
SVG
SVG简介及其用法
svg实例
SVG用法

内容整理自网上！

1、什么是SVG?

  1) SVG指可伸缩矢量图形(Scalable Vector Graphics)
  2) SVG用来定义用于网络的基于矢量的图形
  3) SVG使用XML格式定义图形
  4) SVG图像在放大或改变尺寸的悄况下其图形质皿不会有损失
  5) SVG是万维网联盟的标准

2、SVG的优势:

  1) SVG图像可通过文本编辑器来创建和修改
  2) SVG图像可被搜索、索引、脚本化或压缩
  3) SVG是可伸缩的
  4) SVG图像可在任何的分辨率下被高质量地打印
  5) SVG可在图像质量不下降的悄况下被放大

3、绘制矢量图形

<body>
    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
        <circle cx="60" cy="60" r="50"></circle>
    </svg>
    <!--cx 圆心x坐标-->
    <!--cy 圆心y坐标-->
    <!--r 半径-->
</body>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/SVG
操作几个实例：
1、https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feGaussianBlur

投影
代码：

<body>
    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
        <filter id="dropShadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
            <feOffset dx="2" dy="4" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
        <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropShadow)"></circle>
    </svg>
</body>

2、https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animateMotion

会动的

代码：

    <svg width="120" height="120" viewBox="0 0 120 120" version="1.1">
        <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
              stroke="lightgrey" stroke-width="2"
              fill="none" id="theMotionPath"/>
        <circle cx="10" cy="110" r="3" fill="lightgrey"  />
        <circle cx="110" cy="10" r="3" fill="lightgrey"  />

        <!-- Here is a red circle which will be moved along the motion path. -->
        <circle cx="" cy="" r="5" fill="red">

            <!-- Define the motion path animation -->
            <animateMotion dur="6s" repeatCount="indefinite">
                <mpath xlink:href="#theMotionPath"/>
            </animateMotion>
        </circle>
    </svg>