SVG入门

时间 2019-11-19

标签 svg 入门繁體版

原文原文链接

SVG已经出来好多年了，其实我也知道很久了~_~不过一直没用过，平时一直都是切设计师给的效果图写页面。css

最近设计师作网页改版，里面有些相似小框框，小图标等须要一些动画效果，一开始我只是想纯粹的用css3动画作出来，可是感受效果很是low，尤为是在作折线的过分时，丑哭我了。无奈只好搬出来想学习良久的SVG，小白进修中。。。html

说到SVG，仍是先啰嗦一下它的意思吧！css3

SVG 是使用 XML 来描述二维图形和绘图程序的语言。就是你们所熟悉的可伸缩矢量图形 (Scalable Vector Graphics)。浏览器

与其余图像格式相比，使用 SVG 的优点在于：css3动画

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

查看 SVG 文件

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。svg

IE8和早期版本都须要一个插件 - 如Adobe SVG浏览器，这是免费提供的。工具

废话很少说，直切主题！学习

1.关于svg的引入动画

我如今主要是针对的HTML页面的使用，因此也就直接在HTML里直接引用了。ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg1</title>
</head>
<body>
    <h1>My first SVG</h1>
    <!-- 在Firefox、Internet Explorer九、谷歌Chrome和Safari中，你能够直接在HTML嵌入SVG代码。 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="#333" stroke-width="2" fill="#ff0000" />
          <!-- 另外一种样式写法 -->
      <!-- <circle cx="100" cy="50" r="40" style="stroke:#333;stroke-width=2;fill:#ff0000;" /> -->
    </svg>
</body>
</html>

注意：svg不能直接嵌入到Opera里面。

2.开始绘制

知道了怎么引入svg，下面就要开始绘制了。

举个例子！

我要绘制一个矩形：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:#ccc;stroke-width:2;stroke:#333" />
</svg>
 
</body>
</html>

显示为：

可是，有点问题啊！不知道各位有没有发现.

绘制的时候，我一开始就遇到了个问题，好比我画矩形的时候，宽300，高100，边框宽度2，可是在浏览器打开时，边框显示很不正常。心想多是太细了吧，开始加粗，越粗越不像样。。。。

原来。。。根据浏览器，svg会有自身默认的画布（干脆叫作画布吧）大小，这个大小好像也不太固定。因此解决的办法是给svg根元素里设置它的画布大小，这个最好一开始就设置上，根据本身大小的需求设置。

以下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='500' height='500' style="outline: 5px solid #ccc;">
  <rect width="300" height="100" style="fill:#ccc;stroke-width:2;stroke:#333" />
</svg>

效果就是：

这样边框就显示正常了，以后所绘制的图形也会出现一样的效果，但愿你们当心哈！

好啦！入门就到这里，其余图形的小练习，好比圆形，直线，多边形等，就参考一下http://www.runoob.com/svg/svg-rect.html，作继续练习吧！

其中的fill-rule填充规则参考 http://blog.csdn.net/cuixiping/article/details/7848369;

3.svg路径

关于绘制复杂曲线，能够使用svg的路径path来绘制。例如：

<path d="M10 10L90 90" stroke="#000000" style="stroke-width: 5px;"></path>

其中 d 是属性名；

路径画虚线的方法：
<path stroke-dasharray="5,5" d="M5,20l25,0" /> 其中：第一个是每一个虚线的长度，第二个是虚线之间的间隔。

path的几种路径：

其中：字母大写表示的是绝对位置，小写是相对位置。

例1：SC曲线

<path d="M 100 400 L 100 100 L 200 200 C 300,400 400,400 500,200 S 700,0 800,200" fill="none" stroke='#ff0000' stroke-width='2'/>

效果图:

其中：绿色的线是使用S路径时自动添加的与C路径对称的线。

例2：QT曲线

<path d="M100,100 Q200,200 300,100 T 500,100" stroke-width="2" stroke="blue" fill='none'/>

其中：绿线为使用T路径时自动对称的点。

小效果1：

<!-- 使文字按照路径展现，能够实现文字个性展现 -->
        <defs>
            <path id="path1" d="M20,20 S100,150 200,10" />
        </defs>
        <text x="10" y="100" style="fill:red;">
            <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
        </text>

效果2：

<text x="550" y="400" fill="red" font-size="30" >你好
            <!-- 使字按着路径方向运动 -->
            <animateMotion path="M 0 0 L 100 -100 L100 -200" dur="5s" fill="freeze" />
        </text>

祝你好运！

1. SVG入门
2. SVG动画入门
3. SVG入门—如何手写SVG
4. svg入门学习回顾
5. SVG 线条动画入门
6. SVG 入门及实践
7. SVG 2D入门10 - 滤镜
8. SVG 图像入门教程
9. SVG Sprite 入门（SVG图标解决方案）
10. svg入门：使用js去操做svg图像
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用