/** 通用的 Svg 助手 */ export class SvgHelper { public static createRect = ( width , height , attributes ? ) : SVGRectElement => { const rect = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'rect' ) ; rect . setAttribute ( 'width' , width . toString ( ) ) ; rect . setAttribute ( 'height' , height . toString ( ) ) ; if ( attributes ) { SvgHelper . setAttributes ( rect , attributes ) ; } return rect ; } ; public static createLine = ( x1 , y1 , x2 , y2 , attributes ? ) : SVGLineElement => { const line = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'line' ) ; line . setAttribute ( 'x1' , x1 . toString ( ) ) ; line . setAttribute ( 'y1' , y1 . toString ( ) ) ; line . setAttribute ( 'x2' , x2 . toString ( ) ) ; line . setAttribute ( 'y2' , y2 . toString ( ) ) ; if ( attributes ) { SvgHelper . setAttributes ( line , attributes ) ; } return line ; } ; public static createPolygon = ( points , attributes ? ) : SVGPolygonElement => { const polygon = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'polygon' ) ; polygon . setAttribute ( 'points' , points ) ; if ( attributes ) { SvgHelper . setAttributes ( polygon , attributes ) ; } return polygon ; } ; public static createCircle = ( radius , attributes ? ) : SVGCircleElement => { const circle = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'circle' ) ; circle . setAttribute ( 'cx' , ( radius / 2 ) . toString ( ) ) ; circle . setAttribute ( 'cy' , ( radius / 2 ) . toString ( ) ) ; circle . setAttribute ( 'r' , radius . toString ( ) ) ; if ( attributes ) { SvgHelper . setAttributes ( circle , attributes ) ; } return circle ; } ; public static createGroup = ( attributes ? ) : SVGGElement => { const g = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'g' ) ; if ( attributes ) { SvgHelper . setAttributes ( g , attributes ) ; } return g ; } ; public static setAttributes = ( el , attributes ) => { for ( const [ attr , value ] of attributes ) { el . setAttribute ( attr , value ) ; } } ; public static createTransform = ( ) : SVGTransform => { const svg = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'svg' ) ; return svg . createSVGTransform ( ) ; } ; public static createDefs = ( ) : SVGDefsElement => { const defs = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'defs' ) ; return defs ; } ; public static createMarker = ( id , orient , markerWidth , markerHeight , refX , refY , markerElement ) : SVGMarkerElement => { const marker = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'marker' ) ; SvgHelper . setAttributes ( marker , [ [ 'id' , id ] , [ 'orient' , orient ] , [ 'markerWidth' , markerWidth . toString ( ) ] , [ 'markerHeight' , markerHeight . toString ( ) ] , [ 'refX' , refX . toString ( ) ] , [ 'refY' , refY . toString ( ) ] , ] ) ; marker . appendChild ( markerElement ) ; return marker ; } ; public static createText = ( attributes ? ) : SVGTextElement => { const text = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'text' ) ; text . setAttribute ( 'x' , '0' ) ; text . setAttribute ( 'y' , '0' ) ; if ( attributes ) { SvgHelper . setAttributes ( text , attributes ) ; } return text ; } ; public static createTSpan = ( text , attributes ? ) : SVGTSpanElement => { const tspan = document . createElementNS ( 'http://www.w3.org/2000/svg' , 'tspan' ) ; tspan . textContent = text ; if ( attributes ) { SvgHelper . setAttributes ( tspan , attributes ) ; } return tspan ; } ; }