export class SVGFilters { public flood ( filter , resultId , color , opacity , _settings ? ) { const floodElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "feFlood" ) ; if ( resultId ) { floodElement . setAttribute ( "id" , resultId ) ; } floodElement . setAttribute ( "flood-color" , color ) ; floodElement . setAttribute ( "flood-opacity" , opacity . toString ( ) ) ; filter . appendChild ( floodElement ) ; } public composite ( filter , resultId , in1 , in2 , k1 ? , k2 ? , k3 ? , k4 ? , _settings ? ) { const compositeElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "feComposite" ) ; if ( resultId ) { compositeElement . setAttribute ( "id" , resultId ) ; } compositeElement . setAttribute ( "in" , in1 ) ; compositeElement . setAttribute ( "in2" , in2 ) ; filter . appendChild ( compositeElement ) ; } } export class SVGPathBuilder { private _path = "" ; public move ( x , y ) { this . _path += ` M ${ x } ${ y }` ; } public path ( ) { return this . _path . substr ( 1 ) ; } public line ( pts ) { pts . forEach ( ( point ) => { this . _path += ` L ${ point [ 0 ] } ${ point [ 1 ] }` ; } ) ; } public curveC ( x1 , y1 , x2 , y2 , x , y ) { this . _path += ` C ${ x1 } ${ y1 }, ${ x2 } ${ y2 }, ${ x } ${ y }` ; } public close ( ) { this . _path += ` Z` ; } } export class SVG { public filters = new SVGFilters ( ) ; private _svg : SVGElement ; private _defs : SVGDefsElement | undefined = undefined ; constructor ( svg ) { this . _svg = svg ; } public svg ( parent , x , y , width , height , settings ? ) { const svgElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "svg" ) ; svgElement . setAttribute ( "x" , x . toString ( ) ) ; svgElement . setAttribute ( "y" , y . toString ( ) ) ; svgElement . setAttribute ( "width" , width . toString ( ) ) ; svgElement . setAttribute ( "height" , height . toString ( ) ) ; this . _appendSettings ( settings , svgElement ) ; if ( parent != null ) { parent . appendChild ( svgElement ) ; } else { this . _svg . appendChild ( svgElement ) ; } return svgElement ; } public image ( parent , x , y , width , height , url , settings ? ) { const imageElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "image" ) ; imageElement . setAttribute ( "x" , x . toString ( ) ) ; imageElement . setAttribute ( "y" , y . toString ( ) ) ; imageElement . setAttribute ( "width" , width . toString ( ) ) ; imageElement . setAttribute ( "height" , height . toString ( ) ) ; imageElement . setAttributeNS ( "http://www.w3.org/1999/xlink" , "href" , url ) ; this . _appendSettings ( settings , imageElement ) ; parent . appendChild ( imageElement ) ; return imageElement ; } public rect ( parent , x , y , width , height , rx ? , ry ? , settings ? ) ; public rect ( parent , x , y , width , height , settings ? ) ; public rect ( parent , x , y , width , height , rx ? , ry ? , settings ? ) { const rectElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "rect" ) ; rectElement . setAttribute ( "x" , x . toString ( ) ) ; rectElement . setAttribute ( "y" , y . toString ( ) ) ; rectElement . setAttribute ( "width" , width . toString ( ) ) ; rectElement . setAttribute ( "height" , height . toString ( ) ) ; if ( rx !== undefined ) { if ( rx instanceof Number ) { rectElement . setAttribute ( "rx" , rx . toString ( ) ) ; } else if ( rx instanceof Object ) { this . _appendSettings ( rx , rectElement ) ; } } if ( ry !== undefined ) { rectElement . setAttribute ( "ry" , ry . toString ( ) ) ; } this . _appendSettings ( settings , rectElement ) ; parent . appendChild ( rectElement ) ; return rectElement ; } public line ( parent , x1 , y1 , x2 , y2 , settings ? ) { const lineElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "line" ) ; lineElement . setAttribute ( "x1" , x1 . toString ( ) ) ; lineElement . setAttribute ( "y1" , y1 . toString ( ) ) ; lineElement . setAttribute ( "x2" , x2 . toString ( ) ) ; lineElement . setAttribute ( "y2" , y2 . toString ( ) ) ; this . _appendSettings ( settings , lineElement ) ; parent . appendChild ( lineElement ) ; return lineElement ; } public polygon ( parent , points , settings ? ) { const polygonElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "polygon" ) ; polygonElement . setAttribute ( "points" , points . map ( ( point ) => point . join ( "," ) ) . join ( " " ) ) ; this . _appendSettings ( settings , polygonElement ) ; parent . appendChild ( polygonElement ) ; return polygonElement ; } public polyline ( parent , points , settings ? ) { const polylineElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "polyline" ) ; polylineElement . setAttribute ( "points" , points . map ( ( point ) => point . join ( "," ) ) . join ( " " ) ) ; this . _appendSettings ( settings , polylineElement ) ; parent . appendChild ( polylineElement ) ; return polylineElement ; } public ellipse ( parent , cx , cy , rx , ry , settings ? ) { const ellipseElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "ellipse" ) ; ellipseElement . setAttribute ( "cx" , cx . toString ( ) ) ; ellipseElement . setAttribute ( "cy" , cy . toString ( ) ) ; ellipseElement . setAttribute ( "rx" , rx . toString ( ) ) ; ellipseElement . setAttribute ( "ry" , ry . toString ( ) ) ; this . _appendSettings ( settings , ellipseElement ) ; parent . appendChild ( ellipseElement ) ; return ellipseElement ; } public path ( parent , builder , settings ? ) { const pathElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "path" ) ; pathElement . setAttribute ( "d" , builder . path ( ) ) ; this . _appendSettings ( settings , pathElement ) ; parent . appendChild ( pathElement ) ; return pathElement ; } public text ( parent , x , y , value , settings ? ) { const textElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "text" ) ; textElement . setAttribute ( "x" , x . toString ( ) ) ; textElement . setAttribute ( "y" , y . toString ( ) ) ; this . _appendSettings ( settings , textElement ) ; const textNode = document . createTextNode ( value ) ; textElement . appendChild ( textNode ) ; parent . appendChild ( textElement ) ; return textElement ; } public filter ( parent , id , x , y , width , height , settings ? ) { const filterElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "filter" ) ; filterElement . setAttribute ( "x" , x . toString ( ) ) ; filterElement . setAttribute ( "y" , y . toString ( ) ) ; filterElement . setAttribute ( "width" , width . toString ( ) ) ; filterElement . setAttribute ( "height" , height . toString ( ) ) ; this . _appendSettings ( settings , filterElement ) ; parent . appendChild ( filterElement ) ; return filterElement ; } public pattern ( parent , resultId , x , y , width , height , settings ? ) { const patternElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "pattern" ) ; if ( resultId ) { patternElement . setAttribute ( "id" , resultId ) ; } patternElement . setAttribute ( "x" , x . toString ( ) ) ; patternElement . setAttribute ( "y" , y . toString ( ) ) ; patternElement . setAttribute ( "width" , width . toString ( ) ) ; patternElement . setAttribute ( "height" , height . toString ( ) ) ; this . _appendSettings ( settings , patternElement ) ; parent . appendChild ( patternElement ) ; return patternElement ; } public defs ( ) { if ( this . _defs === undefined ) { const defsElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "defs" ) ; this . _svg . appendChild ( defsElement ) ; this . _defs = defsElement ; } return this . _defs ; } public clipPath ( parent , resultId , units ? , settings ? ) { const clipElement = document . createElementNS ( "http://www.w3.org/2000/svg" , "clipPath" ) ; if ( resultId ) { clipElement . setAttribute ( "id" , resultId ) ; } if ( units === undefined ) { units = "userSpaceOnUse" ; } clipElement . setAttribute ( "clipPathUnits" , units ) ; this . _appendSettings ( settings , clipElement ) ; parent . appendChild ( clipElement ) ; return clipElement ; } public createPath ( ) { return new SVGPathBuilder ( ) ; } private _appendSettings ( settings , element ) { if ( settings !== undefined ) { Object . keys ( settings ) . forEach ( ( key ) => { element . setAttribute ( key , settings [ key ] ) ; } ) ; } } }