├── CNAME ├── _config.yml ├── README ├── 1.gif └── 2.gif ├── .npmignore ├── __dev__ ├── src │ ├── js │ │ ├── img │ │ │ └── list.png │ │ ├── svg-skeleton │ │ │ ├── index.js │ │ │ └── core │ │ │ │ ├── diff.js │ │ │ │ ├── render.js │ │ │ │ ├── shining_mask.js │ │ │ │ └── h.js │ │ └── main.js │ └── index.html ├── .gitignore ├── package.json ├── shell.js └── legoflow.json ├── src ├── index.js └── core │ ├── diff.js │ ├── render.js │ ├── shining_mask.js │ └── h.js ├── assets └── css │ └── style.scss ├── package.json ├── LICENSE ├── README.zh-CN.md ├── README.md └── dist └── svg-skeleton.min.js /CNAME: -------------------------------------------------------------------------------- 1 | svg-skeleton.js.org 2 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /README/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/SVG-Skeleton/HEAD/README/1.gif -------------------------------------------------------------------------------- /README/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/SVG-Skeleton/HEAD/README/2.gif -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | **/__dev__ 2 | **/__test__ 3 | **/example 4 | **/node_modules 5 | **/assets 6 | -------------------------------------------------------------------------------- /__dev__/src/js/img/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yyued/SVG-Skeleton/HEAD/__dev__/src/js/img/list.png -------------------------------------------------------------------------------- /__dev__/.gitignore: -------------------------------------------------------------------------------- 1 | **.zip 2 | **/dist 3 | **/src/sass/_img.scss 4 | **/legolib 5 | **/lego-lib 6 | **/img_old 7 | **.vscode 8 | -------------------------------------------------------------------------------- /__dev__/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svg-skeleton__dev__", 3 | "version": "0.0.1", 4 | "repository": {}, 5 | "author": "UED.lijialiang", 6 | "license": "MIT" 7 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import { h } from './core/h'; 4 | import { render } from './core/render'; 5 | import { diff } from './core/diff'; 6 | 7 | export default { 8 | h, 9 | render, 10 | diff, 11 | }; 12 | -------------------------------------------------------------------------------- /__dev__/src/js/svg-skeleton/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import { h } from './core/h'; 4 | import { render } from './core/render'; 5 | import { diff } from './core/diff'; 6 | 7 | export default { 8 | h, 9 | render, 10 | diff, 11 | }; 12 | -------------------------------------------------------------------------------- /__dev__/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/css/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "{{ site.theme }}"; 5 | 6 | header { 7 | position: initial; 8 | float: initial; 9 | margin: auto; 10 | width: 100%; 11 | border-bottom: 1px solid #eee; 12 | } 13 | 14 | header h1 { 15 | display: none; 16 | } 17 | 18 | header p { 19 | display: none; 20 | } 21 | 22 | header .view { 23 | display: block; 24 | } 25 | 26 | footer { 27 | display: none; 28 | } 29 | 30 | section { 31 | float: initial; 32 | margin: auto; 33 | margin-top: 70px; 34 | width: 100%; 35 | } 36 | 37 | h2 { 38 | margin-top: 60px; 39 | } 40 | -------------------------------------------------------------------------------- /src/core/diff.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | export function diff ( node, image ) { 4 | if ( !node || !image ) { 5 | return void 0; 6 | } 7 | 8 | const newNode = node.cloneNode( true ); 9 | 10 | const imageNode = document.createElementNS( 'http://www.w3.org/2000/svg', 'image' ); 11 | 12 | imageNode.x = 0; 13 | imageNode.y = 0; 14 | imageNode.opacity = .2; 15 | 16 | imageNode.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', image ); 17 | 18 | newNode.childNodes.forEach( ( cNode ) => { 19 | cNode.setAttribute( 'opacity', .9 ); 20 | } ); 21 | 22 | newNode.insertBefore( imageNode, newNode.childNodes[ 0 ] ); 23 | 24 | return newNode; 25 | } 26 | -------------------------------------------------------------------------------- /__dev__/src/js/svg-skeleton/core/diff.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | export function diff ( node, image ) { 4 | if ( !node || !image ) { 5 | return void 0; 6 | } 7 | 8 | const newNode = node.cloneNode( true ); 9 | 10 | const imageNode = document.createElementNS( 'http://www.w3.org/2000/svg', 'image' ); 11 | 12 | imageNode.x = 0; 13 | imageNode.y = 0; 14 | imageNode.opacity = .2; 15 | 16 | imageNode.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', image ); 17 | 18 | newNode.childNodes.forEach( ( cNode ) => { 19 | cNode.setAttribute( 'opacity', .9 ); 20 | } ); 21 | 22 | newNode.insertBefore( imageNode, newNode.childNodes[ 0 ] ); 23 | 24 | return newNode; 25 | } 26 | -------------------------------------------------------------------------------- /__dev__/shell.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | module.exports = ( param ) => { 6 | const { del, folder, gulp, messager, node_exec_file } = param; 7 | 8 | const root = path.resolve( folder, '../' ); 9 | const src = path.resolve( folder, '../src' ); 10 | const source = path.resolve( folder, './src/js/svg-skeleton' ); 11 | 12 | del( [ `${ src }/**/*` ], { force: true }, ( ) => { 13 | gulp.src( `${ source }/**/*` ) 14 | .pipe( gulp.dest( src ) ) 15 | .on( 'end', ( ) => { 16 | node_exec_file( `${ root }/build/index.js`, ( code ) => { 17 | code == 0 ? messager.success( ) : messager.error( 'build error' ); 18 | } ) 19 | } ) 20 | } ); 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svg-skeleton", 3 | "version": "0.0.4", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node ./build" 8 | }, 9 | "author": "lijialiang", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "babel-core": "^6.26.0", 13 | "babel-loader": "^7.1.2", 14 | "babel-plugin-transform-runtime": "^6.23.0", 15 | "babel-preset-env": "^1.6.1", 16 | "babel-preset-stage-0": "^6.24.1", 17 | "fs-extra": "^4.0.2", 18 | "webpack": "^3.8.1" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/yyued/SVG-Skeleton.git" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/yyued/SVG-Skeleton/issues" 26 | }, 27 | "homepage": "https://github.com/yyued/SVG-Skeleton#readme", 28 | "dependencies": { 29 | "url-loader": "^0.6.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /__dev__/legoflow.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.60", 3 | "type": "clean", 4 | "assets": "", 5 | "es6": true, 6 | "webp": false, 7 | "legolib": false, 8 | "https": false, 9 | "hot": false, 10 | "isUglifyJs": true, 11 | "isPackVueStyle": false, 12 | "vue@2.1": false, 13 | "watch": [], 14 | "publicPath": "", 15 | "packImgSize": "", 16 | "packCommon": "", 17 | "other": "", 18 | "dist": "", 19 | "output": "", 20 | "shell": "./shell.js", 21 | "alias": {}, 22 | "global": {}, 23 | "externals": {}, 24 | "proxy": {}, 25 | "ts": {}, 26 | "cache": "timestamp", 27 | "user.dev.args": {}, 28 | "user.build.args": {}, 29 | "env": {}, 30 | "build.move": [], 31 | "build.env": "", 32 | "build.zip": "", 33 | "img.folder": "", 34 | "html.folder": "", 35 | "js.folder": "", 36 | "export.folder": "", 37 | "build.onlyRunShell": true 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 YY UED 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/core/render.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const shining = require('./shining_mask'); 4 | 5 | const StringToDOMElement = function( string ) { 6 | const frame = document.createElement('iframe'); 7 | 8 | frame.style.display = 'none'; 9 | 10 | document.body.appendChild( frame ); 11 | 12 | frame.contentDocument.open( ); 13 | frame.contentDocument.write( string ); 14 | frame.contentDocument.close( ); 15 | 16 | const el = frame.contentDocument.body.firstChild; 17 | 18 | document.body.removeChild( frame ); 19 | 20 | return el; 21 | } 22 | 23 | export function render ( node, parent ) { 24 | if ( !node || !parent ) { 25 | return void 0; 26 | } 27 | 28 | switch ( typeof parent ) { 29 | case 'object': { 30 | break; 31 | } 32 | case 'string': { 33 | parent = document.body.querySelector( parent ); 34 | break; 35 | } 36 | } 37 | 38 | switch ( typeof node ) { 39 | case 'string': { 40 | node = StringToDOMElement( node ); 41 | break; 42 | } 43 | } 44 | 45 | node.appendChild( shining( ) ); 46 | 47 | parent ? parent.appendChild( node ) : void 0; 48 | } 49 | -------------------------------------------------------------------------------- /__dev__/src/js/svg-skeleton/core/render.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const shining = require('./shining_mask'); 4 | 5 | const StringToDOMElement = function( string ) { 6 | const frame = document.createElement('iframe'); 7 | 8 | frame.style.display = 'none'; 9 | 10 | document.body.appendChild( frame ); 11 | 12 | frame.contentDocument.open( ); 13 | frame.contentDocument.write( string ); 14 | frame.contentDocument.close( ); 15 | 16 | const el = frame.contentDocument.body.firstChild; 17 | 18 | document.body.removeChild( frame ); 19 | 20 | return el; 21 | } 22 | 23 | export function render ( node, parent ) { 24 | if ( !node || !parent ) { 25 | return void 0; 26 | } 27 | 28 | switch ( typeof parent ) { 29 | case 'object': { 30 | break; 31 | } 32 | case 'string': { 33 | parent = document.body.querySelector( parent ); 34 | break; 35 | } 36 | } 37 | 38 | switch ( typeof node ) { 39 | case 'string': { 40 | node = StringToDOMElement( node ); 41 | break; 42 | } 43 | } 44 | 45 | node.appendChild( shining( ) ); 46 | 47 | parent ? parent.appendChild( node ) : void 0; 48 | } 49 | -------------------------------------------------------------------------------- /src/core/shining_mask.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = ( ) => { 4 | const defs = document.createElementNS( 'http://www.w3.org/2000/svg', 'defs' ); 5 | 6 | defs.innerHTML = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | `; 23 | 24 | return defs; 25 | }; 26 | -------------------------------------------------------------------------------- /__dev__/src/js/svg-skeleton/core/shining_mask.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = ( ) => { 4 | const defs = document.createElementNS( 'http://www.w3.org/2000/svg', 'defs' ); 5 | 6 | defs.innerHTML = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | `; 23 | 24 | return defs; 25 | }; 26 | -------------------------------------------------------------------------------- /__dev__/src/js/main.js: -------------------------------------------------------------------------------- 1 | import SVGSkeleton from './svg-skeleton'; 2 | 3 | const { h, render, diff } = SVGSkeleton; 4 | 5 | const Item = ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | 14 | const Page = ( ( ) => { 15 | let List = [ ]; 16 | 17 | for ( let i = 0; i < 6; i++ ) { 18 | List.push( ( ) ); 19 | } 20 | 21 | return ( 22 | 23 | { List } 24 | 25 | ); 26 | } )( ); 27 | 28 | const PageString = ` 29 | 30 | 31 | 32 | 33 | 34 | 35 | `; 36 | 37 | // render( diff( Page, require('./img/list.png') ), document.body ); 38 | render( PageString, document.body ); 39 | -------------------------------------------------------------------------------- /src/core/h.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const createElement = ( tag ) => { 4 | return document.createElementNS( 'http://www.w3.org/2000/svg', tag ); 5 | } 6 | 7 | const setAttribute = ( node, attributes ) => { 8 | for ( let key in attributes ) { 9 | const value = attributes[ key ]; 10 | 11 | switch ( key ) { 12 | case 'xlink:href': { 13 | node.setAttributeNS( 'http://www.w3.org/1999/xlink', key, value ); 14 | break; 15 | } 16 | default: { 17 | node.setAttribute( key, value ); 18 | } 19 | } 20 | } 21 | } 22 | 23 | export function h ( nodeName, attributes, ...children ) { 24 | 25 | let node = void 0; 26 | 27 | if ( !node && typeof nodeName === 'object' ) { 28 | node = nodeName.cloneNode( true ); 29 | 30 | attributes ? setAttribute( node, attributes ) : void 0; 31 | 32 | return node; 33 | } 34 | 35 | nodeName && typeof nodeName === 'string' ? node = createElement( nodeName ) : void 0; 36 | 37 | node && attributes ? setAttribute( node, attributes ) : void 0; 38 | 39 | if ( node && children.length > 0 ) { 40 | children.forEach( ( cNode ) => { 41 | if ( Array.isArray( cNode ) ) { 42 | cNode.forEach( ( _c ) => { 43 | node.appendChild( _c ); 44 | } ) 45 | } 46 | else { 47 | node.appendChild( cNode ); 48 | } 49 | } ); 50 | } 51 | 52 | return node; 53 | } 54 | -------------------------------------------------------------------------------- /__dev__/src/js/svg-skeleton/core/h.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const createElement = ( tag ) => { 4 | return document.createElementNS( 'http://www.w3.org/2000/svg', tag ); 5 | } 6 | 7 | const setAttribute = ( node, attributes ) => { 8 | for ( let key in attributes ) { 9 | const value = attributes[ key ]; 10 | 11 | switch ( key ) { 12 | case 'xlink:href': { 13 | node.setAttributeNS( 'http://www.w3.org/1999/xlink', key, value ); 14 | break; 15 | } 16 | default: { 17 | node.setAttribute( key, value ); 18 | } 19 | } 20 | } 21 | } 22 | 23 | export function h ( nodeName, attributes, ...children ) { 24 | 25 | let node = void 0; 26 | 27 | if ( !node && typeof nodeName === 'object' ) { 28 | node = nodeName.cloneNode( true ); 29 | 30 | attributes ? setAttribute( node, attributes ) : void 0; 31 | 32 | return node; 33 | } 34 | 35 | nodeName && typeof nodeName === 'string' ? node = createElement( nodeName ) : void 0; 36 | 37 | node && attributes ? setAttribute( node, attributes ) : void 0; 38 | 39 | if ( node && children.length > 0 ) { 40 | children.forEach( ( cNode ) => { 41 | if ( Array.isArray( cNode ) ) { 42 | cNode.forEach( ( _c ) => { 43 | node.appendChild( _c ); 44 | } ) 45 | } 46 | else { 47 | node.appendChild( cNode ); 48 | } 49 | } ); 50 | } 51 | 52 | return node; 53 | } 54 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 |

SVG-Skeleton

2 | 3 |

4 | 5 | Licence 6 | 7 | 8 | NPM 9 | 10 | 11 | Size 12 | 13 |

14 | 15 | ## 为什么使用 16 | 17 | 骨骼屏我们都并不陌生，而骨骼屏的最大的存在意义是 由于页面渲染出内容的时间较长，而使用它在页面上占位，让用户感知白屏的时间减少。 18 | 19 | 若骨骼屏依赖 React / Vue 等核心框架的时候，必然先需要解析核心库，才到骨骼屏的渲染，这样无疑不是最佳选择。 20 | 21 | **SVG-Skeleton** 正是我们一直所期望的方案的实现。 22 | 23 | 通过 SVG 元素去描述去骨骼图的占位元素，支持 JSX 让编写 SVG 无差别化，复用 SVG 片段，类组件化模式。 24 | 25 | ## 安装 26 | 27 | ```sh 28 | npm i svg-skeleton --save 29 | ``` 30 | 31 | 或者 32 | 33 | ```html 34 | 35 | ``` 36 | 37 | ## 使用 38 | 39 | ### JSX 代码 40 | 41 | ```js 42 | import SVGSkeleton from 'svg-skeleton'; 43 | 44 | const { h, render } = SVGSkeleton; 45 | 46 | // 内置 #shining 动画 47 | const Item = ( 48 | 49 | 50 | 51 | 52 | 53 | 54 | ); 55 | 56 | const Page = ( ( ) => { 57 | let List = [ ]; 58 | 59 | for ( let i = 0; i < 6; i++ ) { 60 | List.push( ( ) ); 61 | } 62 | 63 | return ( 64 | 65 | { List } 66 | 67 | ); 68 | } )( ); 69 | 70 | render( Page, document.body ); 71 | ``` 72 | 73 | ### 输出 74 | 75 |

76 | 77 |

78 | 79 | ## Diff 80 | 81 | 为了尽量骨骼屏幕的元素的位置跟设计稿一样，你需要 Diff 这个功能。 82 | 83 | ### 代码 84 | 85 | ```js 86 | const { diff } = SVGSkeleton; 87 | 88 | render( diff( Page, require('./list.png') ), document.body ); 89 | ``` 90 | 91 | ### 输出 92 | 93 |

94 | 95 |

96 | 97 | 98 | ## 依赖 [JSX & h](https://www.npmjs.com/package/babel-plugin-transform-react-jsx) 99 | 100 | 设置类似于 101 | 102 | ```json 103 | { 104 | "plugins": [ 105 | [ "transform-react-jsx", { "pragma": "h" } ] 106 | ] 107 | } 108 | ``` 109 | 110 | ## 许可 111 | 112 | [MIT](./LICENSE) 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

SVG-Skeleton

2 | 3 |

4 | 5 | Licence 6 | 7 | 8 | NPM 9 | 10 | 11 | Size 12 | 13 |

14 | 15 | ## Why 16 | 17 | Skeletal screen, we are no stranger to, and the biggest existence of the skeletal screen is due to the page rendering out of content for a long time, and use it to occupy the page, users to reduce the time to perceive white screen. 18 | 19 | If the skeletal screen depend on core frameworks such as React / Vue, it will inevitably first need to parse the core library before rendering to the skeletal screen, which is undoubtedly not the best choice. 20 | 21 | **SVG-Skeleton** is exactly what we've been looking for. 22 | 23 | By SVG elements to describe the placeholder elements of the skeletal diagram, support JSX write SVG indifference, reuse SVG fragments, component-based mode. 24 | 25 | [简体中文](./README.zh-CN.md) 26 | 27 | ## Installing 28 | 29 | ```sh 30 | npm i svg-skeleton --save 31 | ``` 32 | 33 | or 34 | 35 | ```html 36 | 37 | ``` 38 | 39 | ## Usage 40 | 41 | ### JSX Code 42 | 43 | ```js 44 | import SVGSkeleton from 'svg-skeleton'; 45 | 46 | const { h, render } = SVGSkeleton; 47 | 48 | // inside #shining animation 49 | const Item = ( 50 | 51 | 52 | 53 | 54 | 55 | 56 | ); 57 | 58 | const Page = ( ( ) => { 59 | let List = [ ]; 60 | 61 | for ( let i = 0; i < 6; i++ ) { 62 | List.push( ( ) ); 63 | } 64 | 65 | return ( 66 | 67 | { List } 68 | 69 | ); 70 | } )( ); 71 | 72 | render( Page, document.body ); 73 | ``` 74 | 75 | ### Output 76 | 77 |

78 | 79 |

80 | 81 | ## Diff 82 | 83 | In order to try to position the elements of the bone screen the same as the design draft, you need the Diff function. 84 | 85 | ### Code 86 | 87 | ```js 88 | const { diff } = SVGSkeleton; 89 | 90 | render( diff( Page, require('./list.png') ), document.body ); 91 | ``` 92 | 93 | ### Output 94 | 95 |

96 | 97 |

98 | 99 | ## Depend on [JSX & h](https://www.npmjs.com/package/babel-plugin-transform-react-jsx) 100 | 101 | the setting will be similar to 102 | 103 | ```json 104 | { 105 | "plugins": [ 106 | [ "transform-react-jsx", { "pragma": "h" } ] 107 | ] 108 | } 109 | ``` 110 | 111 | ## License 112 | 113 | [MIT](./LICENSE) 114 | -------------------------------------------------------------------------------- /dist/svg-skeleton.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * SVG-Skeleton 3 | * 4 | * @file: svg-skeleton.min.js 5 | * @author: lijialiang 6 | * @version: 0.0.4 7 | * @update: 2018-01-31 10:02:48 8 | * 9 | * (c) 2018 YY UEDC 10 | * Released under the MIT License. 11 | */ 12 | !function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.SVGSkeleton=n():t.SVGSkeleton=n()}("undefined"!=typeof self?self:this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function t(){return e.default}:function t(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),r=n(2),i=n(4);t.default={h:o.h,render:r.render,diff:i.diff}},function(e,t,n){"use strict";function o(e,t){var n=void 0;if(!n&&"object"===(void 0===e?"undefined":r(e)))return n=e.cloneNode(!0),t&&u(n,t),n;e&&"string"==typeof e&&(n=i(e)),n&&t&&u(n,t);for(var o=arguments.length,f=Array(o>2?o-2:0),c=2;c0&&f.forEach(function(e){Array.isArray(e)?e.forEach(function(e){n.appendChild(e)}):n.appendChild(e)}),n}Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.h=o;var i=function e(t){return document.createElementNS("http://www.w3.org/2000/svg",t)},u=function e(t,n){for(var o in n){var r=n[o];switch(o){case"xlink:href":t.setAttributeNS("http://www.w3.org/1999/xlink",o,r);break;default:t.setAttribute(o,r)}}}},function(e,t,n){"use strict";function o(e,t){if(e&&t){switch(void 0===t?"undefined":r(t)){case"object":break;case"string":t=document.body.querySelector(t)}switch(void 0===e?"undefined":r(e)){case"string":e=u(e)}e.appendChild(i()),t&&t.appendChild(e)}}Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.render=o;var i=n(3),u=function e(t){var n=document.createElement("iframe");n.style.display="none",document.body.appendChild(n),n.contentDocument.open(),n.contentDocument.write(t),n.contentDocument.close();var o=n.contentDocument.body.firstChild;return document.body.removeChild(n),o}},function(e,t,n){"use strict";e.exports=function(){var e=document.createElementNS("http://www.w3.org/2000/svg","defs");return e.innerHTML='\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ',e}},function(e,t,n){"use strict";function o(e,t){if(e&&t){var n=e.cloneNode(!0),o=document.createElementNS("http://www.w3.org/2000/svg","image");return o.x=0,o.y=0,o.opacity=.2,o.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t),n.childNodes.forEach(function(e){e.setAttribute("opacity",.9)}),n.insertBefore(o,n.childNodes[0]),n}}Object.defineProperty(t,"__esModule",{value:!0}),t.diff=o}])}); --------------------------------------------------------------------------------