SVG入门

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

最近设计师做网页改版，里面有些类似小框框，小图标等需要一些动画效果，一开始我只是想纯粹的用css3动画做出来，但是感觉效果非常low，尤其是在做折线的过度时，丑哭我了。无奈只好搬出来想学习良久的SVG，小白进修中。。。

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

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

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

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

查看 SVG 文件

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

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

 

废话不多说，直切主题！

 

1.关于svg的引入

 

我现在主要是针对的HTML页面的使用，所以也就直接在HTML里直接引用了。

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg1</title>
</head>
<body>
    <h1>My first SVG</h1>
    <!-- 在Firefox、Internet Explorer9、谷歌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>

祝你好运！

 

posted @ 2016-09-22 14:44  可卿救我  阅读(686)  评论(1)  编辑  收藏  举报