This module can draw SVG documents on PIXI.js's Graphics
object, making them scaleable and crisp. The code originates from saschagehlich/pixi-svg-graphics but is API wise incompatible and refactored quite a bit.
Using as a module
var svg = document.querySelector('svg#MySVGTag')
var SVGGraphics = require('pixi-svg-graphics')
var graphics = new SVGGraphics(svg);
Or just include pixi-svg-graphics.min.js in your HTML:
<script src="pixi-svg-graphics.min.js"></script>
The module is then available using window.SVGGraphics
- <svg>
- <style>
- <g>
- <text>
- <line>
- <polyline>
- <circle>
- <ellipse>
- <rect> (no rounded corners supported)
- <polygon>
- <path>
- class
- style
- fill
- stroke
- stroke-width
- stroke-dasharray
- vector-effect
- transform:
- matrix
- translate
- scale
- rotate
- not supported: skewX, skewY
- d (<path> only):
- M (move to)
- L (line to)
- C (curve to)
- V (vertical line to)
- H (horizontal line to)
- S (quadratic curve to)
- Z (close path)
In order to test the library you need a browserstack account and have inkscape installed. First create a '.browserstack.json' in your home folder. Fill it with your credentials. Then you can run 'run_tests.py'. This will automatically start an nginx server, convert all test images inside 'test/src' to png's using inkscape and will then compare these png's with png's, which are created through browserstack. Afterwards it will run an image comparison tool.
- Add font formating support