util-9.svg操作相关(svgUtil)

/**
 * ========================9.svg操作 s========================
 */
/**
 *   svg问题：
 1.绘制表格默认比较粗，viewbox属性使用.5数值可以使线条的1px更细(viewbox=".5 .5 320 320")
 2.svg的DOM节点可以使用jQuery方法进行修改删除，但是不能动态增加节点，即document.createElement("标签名");无效
 3.svg动态增加节点使用document.createElementNS(svgNS,"标签名");
 4.svg的DOM节点属性操作可以使用jQuery方法进行设置获取setAttribute/getAttribute
 5.svg的a标签的href属性为xlink:href="链接"，该属性不能用jQuery设置，需使用document.setAttributeNS(xlinkNS,"xlink:href","链接")
 6.附加在tspan标签上的dx,dy值对其后边相邻tspan同样起作用
 7.方法：getBBox()获取该元素矩形围成的元素，可以获取高度和宽度
 8.元素的x,y位置是指x/X字母的基线位置
 9.常用标签：patter笔刷 & use执行同一个动作 & clip-path裁剪 & mask遮罩蒙版
 * @type {{svgNS: string, creatElementNS: (function(*=): (HTMLElement | SVGAElement | SVGCircleElement | SVGClipPathElement | SVGComponentTransferFunctionElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGGradientElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGPathElement | SVGMetadataElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSVGElement | SVGScriptElement | SVGStopElement | SVGStyleElement | SVGSwitchElement | SVGSymbolElement | SVGTSpanElement | SVGTextContentElement | SVGTextElement | SVGTextPathElement | SVGTextPositioningElement | SVGTitleElement | SVGUseElement | SVGViewElement | SVGElement | Element)), xlinkNS: string, setAttributeNS: (function(*, *=): void)}}
 */
var svgUtil = {
    "svgNS" : "http://www.w3.org/2000/svg",
    "xlinkNS" : "http://www.w3.org/1999/xlink",
    "creatElementNS" : function(nodeTag){  //svg: 动态创建svg标签
        var svgNS = this.svgNS;
        return document.createElementNS(svgNS, nodeTag);
    },
    "setAttributeNS" : function(elem,href){  //svg: 动态给elem创建xlink:href属性
        var xlinkNS = this.xlinkNS;
        return elem.setAttributeNS(xlinkNS, "xlink:href",href);
    }
}
/**
 * ========================9.svg操作 e========================
 */