SVG开发系列（一）

最新推荐文章于 2024-07-19 15:46:14 发布

Mr_lwb

最新推荐文章于 2024-07-19 15:46:14 发布

阅读量2.2k

点赞数 1

分类专栏： Html5 文章标签： svg

本文链接：https://blog.csdn.net/u010881899/article/details/60479834

版权

Html5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

介绍：

SVG从1999年由一组加入W3C的公司启动开发，与之前1998年提交给W3C的标准（PGML、VML）构成竞争。SVG从这两个格式吸取了经验。^[3]

SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML命名空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。

SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG格式具有以下优点：

图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）
与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象
SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索
SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户

SVG格式具有以下缺点：

如何和已经占有重要市场份额的矢量图形格式Adobe Flash竞争的问题。
SVG的本地运行环境下的厂家支持程度。
由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式，附档名为 .svgz，但此种文件格式除了Adobe旗下的软件以外，未被广泛支持使用。
旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。

SVG技术细节：

矢量显示对象，基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等
嵌入式外部图像，包括PNG、JPEG、SVG等
文字对象

SVG可以实现动态和交互功能。在DOM模型的基础上，SVG开发设计人员可以利用ECMAScript或者SMIL来进行时序控制或对象的操纵。SVG虽然是文本格式，但是SVG支持利用gzip压缩算法减少文件尺寸，压缩后的文件通常用被称为“SVGZ文件”

SVG格式是 XML 的一种，SVG文件其实只是普通的文本文件，用一般的文本编辑器便可查看或修改，SVG 文件必须使用 .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">
    <rect x="40" y="60" width="200" height="100" rx="20" fill="red" />
</svg>

xmlns="http://www.w3.org/2000/svg" 指svg命名空间

Demo:

<?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">
    <!--矩形-->
    <rect x="240" y="60" width="200" height="50" rx="20" fill="red" />
    <rect x="240" width="200" height="50" style="fill:blue;stroke-width:5;stroke:black;" />
    <!--矩形透明-->
    <rect width="200" height="50" style="fill:black;x:240;y:120;stroke-width:5;stroke:pink;stroke-opacity:.8;fill-opacity:.5;"/>
    <!--带有圆角的矩形-->
    <rect width="200" height="50" style="fill:red;x:240;y:180;rx:20;ry:20;stroke-width:5;stroke:black;opacity:.5" />
    <!--圆-->
    <circle cx="270" cy="270" r="30" fill="red" stroke="black" stroke-width="5"></circle>
    <!--椭圆-->
    <ellipse cx="280" cy="330" rx="40" ry="20" style="fill:red;stroke:black;stroke-width:5;"></ellipse>
    <!--累叠而上的三个椭圆-->
    <ellipse cx="280" cy="420" rx="40" ry="20" style="fill:lime;"></ellipse>
    <ellipse cx="280" cy="400" rx="60" ry="20" style="fill:gray;"></ellipse>
    <ellipse cx="280" cy="380" rx="80" ry="20" style="fill:yellow"></ellipse>
    <!--一条线-->
    <line x1="120" y1="0" x2="200" y2="100" style="stroke-width:2;stroke:black;"></line>
    <!--三角形-->
    <polygon points="30,60 40,30 50,50" style="fill:gray;stroke:black;stroke-width:2;"></polygon>
    <!--四边形-->
    <polygon points="60,80 140,120 110,40 120,10" style="fill:gray;stroke:black;stroke-width:2;"></polygon>
    <!--折线-->
    <polyline points="0 0,0 20,20 20,20 40" style="fill:white;stroke:red;stroke-width:2;fill-opacity:0.6;stroke-opacity:0.5;">
        <!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent是透明, 勾勒描边为无 style="fill:white;stroke:red;stroke-width:2;fill-opacity:0.6;stroke-opacity:0.8;-->
    </polyline>
    <!--路径-->
    <path d="M20 120 L20 200 L200 200 Z">
        <!--<path> 标签用来定义路径。
            下面的命令可用于路径数据：
            M = moveto
            L = lineto
            H = horizontal lineto
            V = vertical lineto
            C = curveto
            S = smooth curveto
            Q = quadratic Belzier curve
            T = smooth quadratic Belzier curveto
            A = elliptical Arc
            Z = closepath
           注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
           例子定义了一条路径，它开始于位置 20 120，到达位置 20 200，然后从那里开始到 200 200，最后在 20 120 关闭路径 
        -->
    </path>

</svg>

效果图：

SVG引入：

1、svg是基于xml的技术

2、可以通过图片，背景，框架等引入方式（如：在html文件中<img src="xxx.svg" />）

3、直接可以在Html中添加svg

HTML引入：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html引入svg方式</title>
<style type="text/css">
    #demo1{
        width:400px;
        height:400px;
    }
</style>
</head>
<body>
<!--图片引入-->
<!-- <img src="svg1.svg" /> -->
<!--背景引入-->
<!-- <div style="width:400px;height:400px;background:url(svg1.svg) no-repeat"></div> -->
<!-- <iframe src="svg1.svg" frameborder="0"></iframe> -->

<div id="demo1">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="50" style="fill:red;stroke:black;stroke-width:5"></circle>
    </svg>
</div>
</body>
</html>

部分标签使用介绍：

<g>标签：

用于组其他SVG元素的容器。<g> 应用于<g>元素的转换对其所有子元素执行，其任何属性都由其子元素继承。它还可以将多个元素分组以便稍后用<use>元素引用

简单理解就是一个容器（分组）标签，用来组合元素的

案例：靶心

共有的属性：transform:translate(0, 0);

Demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html引入svg方式</title>
<style type="text/css">
    #demo1{
        width:200px;
        height:200px;
        background:#eee;
    }
</style>
</head>
<body>
<div id="demo1">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <!-- 靶心-->
        <!-- <circle cx="100" cy="100" r="30" fill="white" stroke="red" stroke-width="3"></circle>
        <circle cx="100" cy="100" r="20" fill="white" stroke="red" stroke-width="3"></circle>
        <circle cx="100" cy="100" r="10" fill="white" stroke="red" stroke-width="3"></circle>
         -->
        <!--g 标签 做靶心 -->
        <!-- <g fill="white" stroke="red" stroke-width="3">
            <circle cx="100" cy="100" r="30" ></circle>
            <circle cx="100" cy="100" r="20"></circle>
            <circle cx="100" cy="100" r="10"></circle>
            只有都是"通用"的属性才可以 捆绑到g标签上
        </g> -->
        <g transform="translate(100,100)" fill="white" stroke="red" stroke-width="3">
            <circle  r="30" ></circle>
            <circle  r="20"></circle>
            <circle  r="10"></circle>
            <!--只有都是"通用"的属性才可以 捆绑到g标签上-->
        </g>
    </svg>
</div>
</body>
</html>

<text>标签:

<text>元素定义由文本组成的图形元素。<text>像任何其他SVG图形元素一样，可以应用渐变，图案，剪切路径，蒙版或过滤器

Demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html引入svg方式</title>
<style type="text/css">
    #demo1{
        width:200px;
        height:200px;
        background:#fff;
    }
</style>
</head>
<body>
<div id="demo1">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="50" style="fill:transparent;stroke:black;stroke-width:5"></circle>
        <!-- <text x="100" y="100" font-size="20" text-anchor="middle">科鲁兹</text> --> <!--text-anchor:start/middle/end-->
        <!--如果把文字上下，左右居中，方法就是y=字体大小/2-2+y值-->
        <text x="100" y="108" font-size="20" text-anchor="middle">科鲁兹</text>
    </svg>
</div>
</body>
</html>

效果图：

<image> 标签：

Demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html引入svg方式</title>
<style type="text/css">
    #demo1{
        width:200px;
        height:200px;
        background:#fff;
    }
</style>
</head>
<body>
<div id="demo1">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <!-- <g style="cursor:pointer;">           
            <image x="100" y="100" width="100" height="103" xlink:href="images/main.png" />
            <text x="100" y="108" font-size="20" text-anchor="middle">雷克萨斯</text>  
        </g> -->
        <g style="cursor:pointer;">
            <!--x,y 初始位置为最左上角开始,坐标调整方式 x-宽，y-高-->
            <image x="50" y="51" width="100" height="103" xlink:href="images/main.png" />
            <text x="100" y="108" font-size="20" text-anchor="middle">雷克萨斯</text>  
        </g>
    </svg>
</div>
</body>
</html>

效果图：

SVG图像属性讲解：

Mr_lwb

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SVG开发系列（一）

介绍：SVG从1999年由一组加入W3C的公司启动开发，与之前1998年提交给W3C的标准（PGML、VML）构成竞争。SVG从这两个格式吸取了经验。[3]SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML命名空间之内，从而提高SVG图形的搜
复制链接

扫一扫

专栏目录