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
上一篇AngularJS 基本概念整理 [持续更新整理中]
下一篇[转+补充]10 分钟理解 BFC 原理
想对作者说点什么? 我来说一句
相关热词

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

关闭
关闭
关闭