frequencyBounce的专栏

javaWeb转前端

SnapSVG基本概念与使用101

SnapSVG(v0.5.1)

本文仅针对版本v0.5.1情况,其他环境:webpack@4.8.3、npm@5.8.0、nodejs@6.11.0

前身是旧浏览器时代有名的 Raphaël.js
为了更好地发挥HTML5的特性,原作者Dmitry Baranovskiy重写了一个SnapSVG,目前这个项目是Adobede的开源项目之一

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.

目前(20180516)最新版本是v0.5.1。

环境准备

官网下载,解压后v0.5.1版本中,将dist/snap.svg.js(或生产版snap.svg-min.js)放到引入需要使用的html中即可。

webpack

snap.svg.js还没上传到npm,要在webpack中使用需要这样配置:
1. 引入imports-loader
npm i -D imports-loader
2.webpack配置文件

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

3.使用

import Snap from 'snapsvg';

使用101

官网有简单明了的demo,这里不再赘述了
这里讲一下官网demo中没有介绍的很棒的一个Snap有但是Raphaël没有的功能–直接用已有的SVG文件。

import Snap from 'snapsvg';
var mycanv = Snap(500,500);
mycanv.image('./images/tree.svg', 10,10,100,100);
//引入已有的svg图片

效果
这里写图片描述

阅读更多
文章标签: snapsvg svg
个人分类: js snapsvg svg
想对作者说点什么? 我来说一句

101规约报文解释

2013年03月27日 95KB 下载

IEC101规约源代码

2013年11月25日 10KB 下载

snap.svg 中文参考手册 离线php版

2014年11月10日 426KB 下载

没有更多推荐了,返回首页

不良信息举报

SnapSVG基本概念与使用101

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭