阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG 教程

      SVG 教程

      SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

      SVG 使用 XML 格式定义图像。

      现在开始学习 SVG!

      SVG是XML语言的一种形式,有点类似XHTML,它可以用来绘制矢量图形,例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合成,还可以通过滤镜完全改变外观。

      SVG推出于1999年,之前有几个相互竞争的格式规范被提交到W3C,但是都没有完全通过。

      当下的浏览器支持程度请参考 : Can I use

      即便浏览器实现了一些规范,但实现速度完全不能和它的竞争技术相比,它的竞争技术比如说HTML Canvas和Adobe Flash,都已经实现了成熟的应用接口。但是SVG也有自身的优点,比如它实现了DOM接口(比Canvas方便),不需要安装第三方插件就可以在浏览器中使用(比Flash方便)。

      当然,是否使用SVG还要取决于你要实现什么。


      基本要素

      HTML提供了定义标题、段落、表格等等内容的元素。与此类似,SVG也提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。一个简单的SVG文档由 <svg> 根元素和基本的形状元素构成。

      另外还有一个g元素,它用来把若干个基本形状编成一个组。

      从这些开始,SVG可以成为任何复杂的组合图形。SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能,但是所有这些额外的语言特性,都需要在一个定义好的图形区域内实现。

      演示代码

      <h1>My first SVG</h1>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <circle 
              cx="100" 
              cy="50" 
              r="40" 
              stroke="black" 
              stroke-width="2" 
              fill="red" />
      </svg> 
      

      渲染效果如下


      My first SVG


      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录