SVG 学习（一）

时间：2021-05-28 08:46:21

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

什么是SVG？

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG 的历史和优势

在 2003 年一月，SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比，使用 SVG 的优势在于：

  • SVG 可被非常多的工具读取和修改（比如记事本）
  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

SVG 的主要竞争者是 Flash。

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

查看 SVG 文件

今天，所有浏览器均支持 SVG 文件，不过需要安装插件的 Internet Explorer 除外。插件是免费的，比如 Adobe SVG Viewer。

以上说明来源于w3c

接下来开始正式进入svg学习.........................

1、首先看一个例子svg圆和文字的创建

<!--svg圆和文字-->

    <svg id="diag" width="400" height="400" style="border:1px solid #000;">

        <circle cx="50" cy="50" r="50"/>

        <text y="100" x="100" font-family="Arial" font-size="60px" fill="#f00" text-anchor="left">

            SVG 文本

        </text>

    </svg>

2、SVG 绘制矩形

<svg width="200" height="200">

        <rect x="10" y="10" width="100" height="100" stroke="red" fill="#ccc" />

    </svg>

    stroke="red" 红色边框  fill="#ccc"灰色填充色

3、SVG 绘制圆形

 <svg width="200" height="200">

        <rect x="10" y="10" width="100" height="100" stroke="red" fill="#ccc" />

        <circle cx="50" cy="50" r="40" stroke="#00f" fill="none" stroke-width="8"/>

    </svg> 

        cx="50" 圆心的x坐标值

        cy="50" 圆心的y坐标值

        r="40"  圆的半径

        fill="none"  不添加填充

        stroke-width="8" 边框宽度为8

        stroke="#00f"  边框颜色

4、svg的变换

<svg width="200" height="200">

        <g transform="translate(60,0) rotate(30) scale(0.75)" id="sh_group">

            <rect x="10" y="10" width="100" height="100" stroke="#ccc" fill="#ccc"/>

            <circle cx="100" cy="100" r="40" stroke="#f00" fill="none" stroke-width="5"/>

        </g>

    </svg>

        <g></g>  代表一个组，可以将多个元素结合起来

        transform：变换

        translate(60,0) 平移到60x 0y

        rotate(30)  旋转30度

        scale(0.75) 缩放到之前的0.75倍

5、svg复用内容

<svg width="200" height="200">

        <defs>

            <g id="sh_group">

                <rect x="10" y="10" width="100" height="100" stroke="#ccc" fill="#ccc"/>

                <circle cx="100" cy="100" r="40" stroke="#f00" fill="none" stroke-width="5"/>

            </g>

        </defs>

        <use xlink:href="#sh_group" transform="translate(60,0) rotate(30) scale(0.75)"/>

        <use xlink:href="#sh_group" transform="translate(120,80) rotate(30) scale(0.45)"/>

        <use xlink:href="#sh_group" transform="translate(20,60) rotate(30) scale(0.25)"/>

    </svg> 

        defs 用于定义留待将来使用的内容。

        use 用来链接到defs元素定义的内容。

6、为矩形和圆形添加纹理

 <svg width="200" height="200">

        <defs>

            <pattern id="grap" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67">

                <image x="0" y="0" width="100" height="67" xlink:href="https://www.baidu.com/img/bd_logo1.png"></image>

            </pattern>

            <linearGradient id="redBLackGradient">

                <stop offset="0%" stop-color="#000"></stop>

                <stop offset="100%" stop-color="#f00"></stop>

            </linearGradient>

        </defs>

        <rect width="100" height="80" x="10" y="20" stroke="red" fill="url(#redBLackGradient)"/>

        <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#grap)" />

    </svg> 

        pattern 定义一个待填充的图像

        linearGradient:定义一个渐变

        stop:设置渐变的开始值以及结束值

        fill="url(#redBLackGradient)加载预设的纹理或者渐变

7、svg路径

<svg width="300" height="300">

        <path d="M-25,-50L-10,-80L-20,-80L-5,-110L-15,-110L0,-140L15,-110L5,-110L20,-80L10,-80L25,-50Z" fill="#f00" transform="translate(100,200)" id="can">

        </path>

    </svg> 

        path:*形态的路径

        d:代表数据

        M:代表moveTo 移动到某一点

        L:代表lineto 划线至

        Q：代表二次曲线

        Z：代表闭合路径

8、svg 二次曲线路径

<svg width="400" height="400">

        <defs>

            <pattern id="gd" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67">

                <image x="0" y="0" width="100" height="67" xlink:href="https://www.baidu.com/img/bd_logo1.png"></image>

            </pattern>

        </defs>

        <g transform="translate(-10,350)" stroke-width="20" stroke="url(#gd)" stroke-linejoin="round">

            <path d="M0,0Q170,-50 260,-190Q310,-250 410,-250" fill="none">

            </path>

        </g>

    </svg> 
     stroke-linejoin="round":这段代码作用是让二次曲线的接口处变圆滑

9、svg 文本

<svg width="600" height="200">

        <text x="10" y="60" font-family="Arial" stroke="#0ff" font-size="40px" font-weight="bold">

            dfksfgjfgdj

        </text>

    </svg>
定义的方法和css定义基本差不多

相关文章