How to use svgdom - 9 common examples

draw = SVG().addTo(drawing).size(100,100)
})

afterEach(function(){
  draw.remove()
})

// strip spaces from result
window.stripped = function(string) {
  string = string.replace(/\s+/g, '')
  if(string.slice(-1) == ';') string = string.slice(0, -1)
  return string
}

// This is needed because of IE11 which uses space as a delimiter in matrix
window.matrixStringToArray = function(source){
  return source
    .replace(/matrix\(|\)/, '')
    .split(SVG.regex.delimiter)
    .map(parseFloat)
}

// This is needed because of IE11 creating values like 2.99999 when calculating a transformed box
window.roundBox = function(box) {
  return new SVG.Box(
    Math.round(box.x),
    Math.round(box.y),
    Math.round(box.width),
    Math.round(box.height)
  )
}

window.stripped = function(string) {
  string = string.replace(/\s+/g, '')
  if(string.slice(-1) == ';') string = string.slice(0, -1)
  return string
}

// This is needed because of IE11 which uses space as a delimiter in matrix
window.matrixStringToArray = function(source){
  return source
    .replace(/matrix\(|\)/, '')
    .split(SVG.regex.delimiter)
    .map(parseFloat)
}

// This is needed because of IE11 creating values like 2.99999 when calculating a transformed box
window.roundBox = function(box) {
  return new SVG.Box(
    Math.round(box.x),
    Math.round(box.y),
    Math.round(box.width),
    Math.round(box.height)
  )
}

// Same thing here with matrices
window.roundMatrix = function (mat) {
  return new SVG.Matrix(
    +(mat.a.toFixed(5)),
    +(mat.b.toFixed(5)),
    +(mat.c.toFixed(5)),
    +(mat.d.toFixed(5)),
    +(mat.e.toFixed(5)),

.split(SVG.regex.delimiter)
    .map(parseFloat)
}

// This is needed because of IE11 creating values like 2.99999 when calculating a transformed box
window.roundBox = function(box) {
  return new SVG.Box(
    Math.round(box.x),
    Math.round(box.y),
    Math.round(box.width),
    Math.round(box.height)
  )
}

// Same thing here with matrices
window.roundMatrix = function (mat) {
  return new SVG.Matrix(
    +(mat.a.toFixed(5)),
    +(mat.b.toFixed(5)),
    +(mat.c.toFixed(5)),
    +(mat.d.toFixed(5)),
    +(mat.e.toFixed(5)),
    +(mat.f.toFixed(5))
  )
}

// lorem ipsum text
loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales\n imperdiet auctor. Nunc ultrices lectus at erat dictum pharetra\n elementum ante posuere. Duis turpis risus, blandit nec elementum et,\n posuere eget lacus. Aliquam et risus magna, eu aliquet nibh. Fusce\n consequat mi quis purus varius sagittis euismod urna interdum.\n Curabitur aliquet orci quis felis semper vulputate. Vestibulum ac nisi\n magna, id dictum diam. Proin sed metus vel magna blandit\n sodales. Pellentesque at neque ultricies nunc euismod rutrum ut in\n lorem. Mauris euismod tellus in tellus tempus interdum. Phasellus\n mattis sapien et leo feugiat dictum. Vestibulum at volutpat velit.'

beforeEach(function(){
  // test for touch device
  this.isTouchDevice = 'ontouchstart' in document.documentElement
  draw = SVG().addTo(drawing).size(100,100)
})

afterEach(function(){
  draw.remove()
})

// strip spaces from result
window.stripped = function(string) {
  string = string.replace(/\s+/g, '')
  if(string.slice(-1) == ';') string = string.slice(0, -1)
  return string
}

// This is needed because of IE11 which uses space as a delimiter in matrix
window.matrixStringToArray = function(source){
  return source
    .replace(/matrix\(|\)/, '')
    .split(SVG.regex.delimiter)
    .map(parseFloat)
}

// This is needed because of IE11 creating values like 2.99999 when calculating a transformed box
window.roundBox = function(box) {
  return new SVG.Box(

// 		this._leftBorder = leftBorder
// 		this._bottomBorder = bottomBorder

// 		var draw = SVG('drawing').size(100, 100)
// 		this.value = draw.rect(100, 100).fill('#f06')
// 	}

// 	static requestHandler(request: Hapi.Request, h: any)
// 	{
// 		const instance = new Tile(1, true, true)
// 		return instance.value
// 	}
// }

import window from 'svgdom'
const document = window.document

import { SVG, registerWindow } from '@svgdotjs/svg.js'

registerWindow(window , document)

export default class Tile
{

	constructor(thickness, leftBorder, bottomBorder) 
	{ 
		this._thickness = thickness
		this._leftBorder = leftBorder
		this._bottomBorder = bottomBorder

		const canvas = SVG(document.documentElement)
		canvas.attr({

'use strict';

const express = require('express');
const port = process.env.PORT || 3000;

const window = require('svgdom');
const SVG = require('svg.js')(window);
require('svg.path.js');
const doc = window.document;
const draw = SVG(doc.documentElement);

const svg2png = require('svg2png');

require('./cat.js');

function getCatSvg() {
    // Put everything in a viewbox
    draw.viewbox(0, 0, 100, 120);

    // Create a background
    //draw.rect(1000, 1000).move(-500, -500).fill('yellow');

    // Draw the cat
    draw.cat();

tape('translate can take an array and set transform attr on svg element', function(test) {
  var svg = svgdom.document.documentElement;
  d3.select(svg).translate([10, 10]);
  test.equal(svg.getAttribute('transform'), 'translate(10,10)');
  test.end();
});

tape('translate can take an array and set transform attr on svg element', function(test) {
  var svg = svgdom.document.documentElement;
  d3.select(svg).translate(function(){ return [10, 10]; });
  test.equal(svg.getAttribute('transform'), 'translate(10,10)');
  test.end();
});

parserInDoc = false

if(typeof exports === 'object'){
  window = require('svgdom')
  SVG = require('../../dist/svg.js')
  document = window.document
  drawing = document.documentElement
  imageUrl = 'spec/fixtures/pixel.png'
  parserInDoc = true

  function tag(name, attrs, children) {
    var el = document.createElement(name)
    for(var i in attrs){
      el.setAttribute(i, attrs[i])
    }

    for(var i in children){
      if(typeof children[i] == 'string')
        children[i] = document.createTextNode(children[i])

      el.appendChild(children[i])
    }