You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
634 lines
25 KiB
634 lines
25 KiB
import Group from '../graphic/Group.js'; |
|
import ZRImage from '../graphic/Image.js'; |
|
import Circle from '../graphic/shape/Circle.js'; |
|
import Rect from '../graphic/shape/Rect.js'; |
|
import Ellipse from '../graphic/shape/Ellipse.js'; |
|
import Line from '../graphic/shape/Line.js'; |
|
import Polygon from '../graphic/shape/Polygon.js'; |
|
import Polyline from '../graphic/shape/Polyline.js'; |
|
import * as matrix from '../core/matrix.js'; |
|
import { createFromString } from './path.js'; |
|
import { defaults, trim, each, map, keys, hasOwn } from '../core/util.js'; |
|
import LinearGradient from '../graphic/LinearGradient.js'; |
|
import RadialGradient from '../graphic/RadialGradient.js'; |
|
import TSpan from '../graphic/TSpan.js'; |
|
import { parseXML } from './parseXML.js'; |
|
; |
|
var nodeParsers; |
|
var INHERITABLE_STYLE_ATTRIBUTES_MAP = { |
|
'fill': 'fill', |
|
'stroke': 'stroke', |
|
'stroke-width': 'lineWidth', |
|
'opacity': 'opacity', |
|
'fill-opacity': 'fillOpacity', |
|
'stroke-opacity': 'strokeOpacity', |
|
'stroke-dasharray': 'lineDash', |
|
'stroke-dashoffset': 'lineDashOffset', |
|
'stroke-linecap': 'lineCap', |
|
'stroke-linejoin': 'lineJoin', |
|
'stroke-miterlimit': 'miterLimit', |
|
'font-family': 'fontFamily', |
|
'font-size': 'fontSize', |
|
'font-style': 'fontStyle', |
|
'font-weight': 'fontWeight', |
|
'text-anchor': 'textAlign', |
|
'visibility': 'visibility', |
|
'display': 'display' |
|
}; |
|
var INHERITABLE_STYLE_ATTRIBUTES_MAP_KEYS = keys(INHERITABLE_STYLE_ATTRIBUTES_MAP); |
|
var SELF_STYLE_ATTRIBUTES_MAP = { |
|
'alignment-baseline': 'textBaseline', |
|
'stop-color': 'stopColor' |
|
}; |
|
var SELF_STYLE_ATTRIBUTES_MAP_KEYS = keys(SELF_STYLE_ATTRIBUTES_MAP); |
|
var SVGParser = (function () { |
|
function SVGParser() { |
|
this._defs = {}; |
|
this._root = null; |
|
} |
|
SVGParser.prototype.parse = function (xml, opt) { |
|
opt = opt || {}; |
|
var svg = parseXML(xml); |
|
if (process.env.NODE_ENV !== 'production') { |
|
if (!svg) { |
|
throw new Error('Illegal svg'); |
|
} |
|
} |
|
this._defsUsePending = []; |
|
var root = new Group(); |
|
this._root = root; |
|
var named = []; |
|
var viewBox = svg.getAttribute('viewBox') || ''; |
|
var width = parseFloat((svg.getAttribute('width') || opt.width)); |
|
var height = parseFloat((svg.getAttribute('height') || opt.height)); |
|
isNaN(width) && (width = null); |
|
isNaN(height) && (height = null); |
|
parseAttributes(svg, root, null, true, false); |
|
var child = svg.firstChild; |
|
while (child) { |
|
this._parseNode(child, root, named, null, false, false); |
|
child = child.nextSibling; |
|
} |
|
applyDefs(this._defs, this._defsUsePending); |
|
this._defsUsePending = []; |
|
var viewBoxRect; |
|
var viewBoxTransform; |
|
if (viewBox) { |
|
var viewBoxArr = splitNumberSequence(viewBox); |
|
if (viewBoxArr.length >= 4) { |
|
viewBoxRect = { |
|
x: parseFloat((viewBoxArr[0] || 0)), |
|
y: parseFloat((viewBoxArr[1] || 0)), |
|
width: parseFloat(viewBoxArr[2]), |
|
height: parseFloat(viewBoxArr[3]) |
|
}; |
|
} |
|
} |
|
if (viewBoxRect && width != null && height != null) { |
|
viewBoxTransform = makeViewBoxTransform(viewBoxRect, { x: 0, y: 0, width: width, height: height }); |
|
if (!opt.ignoreViewBox) { |
|
var elRoot = root; |
|
root = new Group(); |
|
root.add(elRoot); |
|
elRoot.scaleX = elRoot.scaleY = viewBoxTransform.scale; |
|
elRoot.x = viewBoxTransform.x; |
|
elRoot.y = viewBoxTransform.y; |
|
} |
|
} |
|
if (!opt.ignoreRootClip && width != null && height != null) { |
|
root.setClipPath(new Rect({ |
|
shape: { x: 0, y: 0, width: width, height: height } |
|
})); |
|
} |
|
return { |
|
root: root, |
|
width: width, |
|
height: height, |
|
viewBoxRect: viewBoxRect, |
|
viewBoxTransform: viewBoxTransform, |
|
named: named |
|
}; |
|
}; |
|
SVGParser.prototype._parseNode = function (xmlNode, parentGroup, named, namedFrom, isInDefs, isInText) { |
|
var nodeName = xmlNode.nodeName.toLowerCase(); |
|
var el; |
|
var namedFromForSub = namedFrom; |
|
if (nodeName === 'defs') { |
|
isInDefs = true; |
|
} |
|
if (nodeName === 'text') { |
|
isInText = true; |
|
} |
|
if (nodeName === 'defs' || nodeName === 'switch') { |
|
el = parentGroup; |
|
} |
|
else { |
|
if (!isInDefs) { |
|
var parser_1 = nodeParsers[nodeName]; |
|
if (parser_1 && hasOwn(nodeParsers, nodeName)) { |
|
el = parser_1.call(this, xmlNode, parentGroup); |
|
var nameAttr = xmlNode.getAttribute('name'); |
|
if (nameAttr) { |
|
var newNamed = { |
|
name: nameAttr, |
|
namedFrom: null, |
|
svgNodeTagLower: nodeName, |
|
el: el |
|
}; |
|
named.push(newNamed); |
|
if (nodeName === 'g') { |
|
namedFromForSub = newNamed; |
|
} |
|
} |
|
else if (namedFrom) { |
|
named.push({ |
|
name: namedFrom.name, |
|
namedFrom: namedFrom, |
|
svgNodeTagLower: nodeName, |
|
el: el |
|
}); |
|
} |
|
parentGroup.add(el); |
|
} |
|
} |
|
var parser = paintServerParsers[nodeName]; |
|
if (parser && hasOwn(paintServerParsers, nodeName)) { |
|
var def = parser.call(this, xmlNode); |
|
var id = xmlNode.getAttribute('id'); |
|
if (id) { |
|
this._defs[id] = def; |
|
} |
|
} |
|
} |
|
if (el && el.isGroup) { |
|
var child = xmlNode.firstChild; |
|
while (child) { |
|
if (child.nodeType === 1) { |
|
this._parseNode(child, el, named, namedFromForSub, isInDefs, isInText); |
|
} |
|
else if (child.nodeType === 3 && isInText) { |
|
this._parseText(child, el); |
|
} |
|
child = child.nextSibling; |
|
} |
|
} |
|
}; |
|
SVGParser.prototype._parseText = function (xmlNode, parentGroup) { |
|
var text = new TSpan({ |
|
style: { |
|
text: xmlNode.textContent |
|
}, |
|
silent: true, |
|
x: this._textX || 0, |
|
y: this._textY || 0 |
|
}); |
|
inheritStyle(parentGroup, text); |
|
parseAttributes(xmlNode, text, this._defsUsePending, false, false); |
|
applyTextAlignment(text, parentGroup); |
|
var textStyle = text.style; |
|
var fontSize = textStyle.fontSize; |
|
if (fontSize && fontSize < 9) { |
|
textStyle.fontSize = 9; |
|
text.scaleX *= fontSize / 9; |
|
text.scaleY *= fontSize / 9; |
|
} |
|
var font = (textStyle.fontSize || textStyle.fontFamily) && [ |
|
textStyle.fontStyle, |
|
textStyle.fontWeight, |
|
(textStyle.fontSize || 12) + 'px', |
|
textStyle.fontFamily || 'sans-serif' |
|
].join(' '); |
|
textStyle.font = font; |
|
var rect = text.getBoundingRect(); |
|
this._textX += rect.width; |
|
parentGroup.add(text); |
|
return text; |
|
}; |
|
SVGParser.internalField = (function () { |
|
nodeParsers = { |
|
'g': function (xmlNode, parentGroup) { |
|
var g = new Group(); |
|
inheritStyle(parentGroup, g); |
|
parseAttributes(xmlNode, g, this._defsUsePending, false, false); |
|
return g; |
|
}, |
|
'rect': function (xmlNode, parentGroup) { |
|
var rect = new Rect(); |
|
inheritStyle(parentGroup, rect); |
|
parseAttributes(xmlNode, rect, this._defsUsePending, false, false); |
|
rect.setShape({ |
|
x: parseFloat(xmlNode.getAttribute('x') || '0'), |
|
y: parseFloat(xmlNode.getAttribute('y') || '0'), |
|
width: parseFloat(xmlNode.getAttribute('width') || '0'), |
|
height: parseFloat(xmlNode.getAttribute('height') || '0') |
|
}); |
|
rect.silent = true; |
|
return rect; |
|
}, |
|
'circle': function (xmlNode, parentGroup) { |
|
var circle = new Circle(); |
|
inheritStyle(parentGroup, circle); |
|
parseAttributes(xmlNode, circle, this._defsUsePending, false, false); |
|
circle.setShape({ |
|
cx: parseFloat(xmlNode.getAttribute('cx') || '0'), |
|
cy: parseFloat(xmlNode.getAttribute('cy') || '0'), |
|
r: parseFloat(xmlNode.getAttribute('r') || '0') |
|
}); |
|
circle.silent = true; |
|
return circle; |
|
}, |
|
'line': function (xmlNode, parentGroup) { |
|
var line = new Line(); |
|
inheritStyle(parentGroup, line); |
|
parseAttributes(xmlNode, line, this._defsUsePending, false, false); |
|
line.setShape({ |
|
x1: parseFloat(xmlNode.getAttribute('x1') || '0'), |
|
y1: parseFloat(xmlNode.getAttribute('y1') || '0'), |
|
x2: parseFloat(xmlNode.getAttribute('x2') || '0'), |
|
y2: parseFloat(xmlNode.getAttribute('y2') || '0') |
|
}); |
|
line.silent = true; |
|
return line; |
|
}, |
|
'ellipse': function (xmlNode, parentGroup) { |
|
var ellipse = new Ellipse(); |
|
inheritStyle(parentGroup, ellipse); |
|
parseAttributes(xmlNode, ellipse, this._defsUsePending, false, false); |
|
ellipse.setShape({ |
|
cx: parseFloat(xmlNode.getAttribute('cx') || '0'), |
|
cy: parseFloat(xmlNode.getAttribute('cy') || '0'), |
|
rx: parseFloat(xmlNode.getAttribute('rx') || '0'), |
|
ry: parseFloat(xmlNode.getAttribute('ry') || '0') |
|
}); |
|
ellipse.silent = true; |
|
return ellipse; |
|
}, |
|
'polygon': function (xmlNode, parentGroup) { |
|
var pointsStr = xmlNode.getAttribute('points'); |
|
var pointsArr; |
|
if (pointsStr) { |
|
pointsArr = parsePoints(pointsStr); |
|
} |
|
var polygon = new Polygon({ |
|
shape: { |
|
points: pointsArr || [] |
|
}, |
|
silent: true |
|
}); |
|
inheritStyle(parentGroup, polygon); |
|
parseAttributes(xmlNode, polygon, this._defsUsePending, false, false); |
|
return polygon; |
|
}, |
|
'polyline': function (xmlNode, parentGroup) { |
|
var pointsStr = xmlNode.getAttribute('points'); |
|
var pointsArr; |
|
if (pointsStr) { |
|
pointsArr = parsePoints(pointsStr); |
|
} |
|
var polyline = new Polyline({ |
|
shape: { |
|
points: pointsArr || [] |
|
}, |
|
silent: true |
|
}); |
|
inheritStyle(parentGroup, polyline); |
|
parseAttributes(xmlNode, polyline, this._defsUsePending, false, false); |
|
return polyline; |
|
}, |
|
'image': function (xmlNode, parentGroup) { |
|
var img = new ZRImage(); |
|
inheritStyle(parentGroup, img); |
|
parseAttributes(xmlNode, img, this._defsUsePending, false, false); |
|
img.setStyle({ |
|
image: xmlNode.getAttribute('xlink:href') || xmlNode.getAttribute('href'), |
|
x: +xmlNode.getAttribute('x'), |
|
y: +xmlNode.getAttribute('y'), |
|
width: +xmlNode.getAttribute('width'), |
|
height: +xmlNode.getAttribute('height') |
|
}); |
|
img.silent = true; |
|
return img; |
|
}, |
|
'text': function (xmlNode, parentGroup) { |
|
var x = xmlNode.getAttribute('x') || '0'; |
|
var y = xmlNode.getAttribute('y') || '0'; |
|
var dx = xmlNode.getAttribute('dx') || '0'; |
|
var dy = xmlNode.getAttribute('dy') || '0'; |
|
this._textX = parseFloat(x) + parseFloat(dx); |
|
this._textY = parseFloat(y) + parseFloat(dy); |
|
var g = new Group(); |
|
inheritStyle(parentGroup, g); |
|
parseAttributes(xmlNode, g, this._defsUsePending, false, true); |
|
return g; |
|
}, |
|
'tspan': function (xmlNode, parentGroup) { |
|
var x = xmlNode.getAttribute('x'); |
|
var y = xmlNode.getAttribute('y'); |
|
if (x != null) { |
|
this._textX = parseFloat(x); |
|
} |
|
if (y != null) { |
|
this._textY = parseFloat(y); |
|
} |
|
var dx = xmlNode.getAttribute('dx') || '0'; |
|
var dy = xmlNode.getAttribute('dy') || '0'; |
|
var g = new Group(); |
|
inheritStyle(parentGroup, g); |
|
parseAttributes(xmlNode, g, this._defsUsePending, false, true); |
|
this._textX += parseFloat(dx); |
|
this._textY += parseFloat(dy); |
|
return g; |
|
}, |
|
'path': function (xmlNode, parentGroup) { |
|
var d = xmlNode.getAttribute('d') || ''; |
|
var path = createFromString(d); |
|
inheritStyle(parentGroup, path); |
|
parseAttributes(xmlNode, path, this._defsUsePending, false, false); |
|
path.silent = true; |
|
return path; |
|
} |
|
}; |
|
})(); |
|
return SVGParser; |
|
}()); |
|
var paintServerParsers = { |
|
'lineargradient': function (xmlNode) { |
|
var x1 = parseInt(xmlNode.getAttribute('x1') || '0', 10); |
|
var y1 = parseInt(xmlNode.getAttribute('y1') || '0', 10); |
|
var x2 = parseInt(xmlNode.getAttribute('x2') || '10', 10); |
|
var y2 = parseInt(xmlNode.getAttribute('y2') || '0', 10); |
|
var gradient = new LinearGradient(x1, y1, x2, y2); |
|
parsePaintServerUnit(xmlNode, gradient); |
|
parseGradientColorStops(xmlNode, gradient); |
|
return gradient; |
|
}, |
|
'radialgradient': function (xmlNode) { |
|
var cx = parseInt(xmlNode.getAttribute('cx') || '0', 10); |
|
var cy = parseInt(xmlNode.getAttribute('cy') || '0', 10); |
|
var r = parseInt(xmlNode.getAttribute('r') || '0', 10); |
|
var gradient = new RadialGradient(cx, cy, r); |
|
parsePaintServerUnit(xmlNode, gradient); |
|
parseGradientColorStops(xmlNode, gradient); |
|
return gradient; |
|
} |
|
}; |
|
function parsePaintServerUnit(xmlNode, gradient) { |
|
var gradientUnits = xmlNode.getAttribute('gradientUnits'); |
|
if (gradientUnits === 'userSpaceOnUse') { |
|
gradient.global = true; |
|
} |
|
} |
|
function parseGradientColorStops(xmlNode, gradient) { |
|
var stop = xmlNode.firstChild; |
|
while (stop) { |
|
if (stop.nodeType === 1 |
|
&& stop.nodeName.toLocaleLowerCase() === 'stop') { |
|
var offsetStr = stop.getAttribute('offset'); |
|
var offset = void 0; |
|
if (offsetStr && offsetStr.indexOf('%') > 0) { |
|
offset = parseInt(offsetStr, 10) / 100; |
|
} |
|
else if (offsetStr) { |
|
offset = parseFloat(offsetStr); |
|
} |
|
else { |
|
offset = 0; |
|
} |
|
var styleVals = {}; |
|
parseInlineStyle(stop, styleVals, styleVals); |
|
var stopColor = styleVals.stopColor |
|
|| stop.getAttribute('stop-color') |
|
|| '#000000'; |
|
gradient.colorStops.push({ |
|
offset: offset, |
|
color: stopColor |
|
}); |
|
} |
|
stop = stop.nextSibling; |
|
} |
|
} |
|
function inheritStyle(parent, child) { |
|
if (parent && parent.__inheritedStyle) { |
|
if (!child.__inheritedStyle) { |
|
child.__inheritedStyle = {}; |
|
} |
|
defaults(child.__inheritedStyle, parent.__inheritedStyle); |
|
} |
|
} |
|
function parsePoints(pointsString) { |
|
var list = splitNumberSequence(pointsString); |
|
var points = []; |
|
for (var i = 0; i < list.length; i += 2) { |
|
var x = parseFloat(list[i]); |
|
var y = parseFloat(list[i + 1]); |
|
points.push([x, y]); |
|
} |
|
return points; |
|
} |
|
function parseAttributes(xmlNode, el, defsUsePending, onlyInlineStyle, isTextGroup) { |
|
var disp = el; |
|
var inheritedStyle = disp.__inheritedStyle = disp.__inheritedStyle || {}; |
|
var selfStyle = {}; |
|
if (xmlNode.nodeType === 1) { |
|
parseTransformAttribute(xmlNode, el); |
|
parseInlineStyle(xmlNode, inheritedStyle, selfStyle); |
|
if (!onlyInlineStyle) { |
|
parseAttributeStyle(xmlNode, inheritedStyle, selfStyle); |
|
} |
|
} |
|
disp.style = disp.style || {}; |
|
if (inheritedStyle.fill != null) { |
|
disp.style.fill = getFillStrokeStyle(disp, 'fill', inheritedStyle.fill, defsUsePending); |
|
} |
|
if (inheritedStyle.stroke != null) { |
|
disp.style.stroke = getFillStrokeStyle(disp, 'stroke', inheritedStyle.stroke, defsUsePending); |
|
} |
|
each([ |
|
'lineWidth', 'opacity', 'fillOpacity', 'strokeOpacity', 'miterLimit', 'fontSize' |
|
], function (propName) { |
|
if (inheritedStyle[propName] != null) { |
|
disp.style[propName] = parseFloat(inheritedStyle[propName]); |
|
} |
|
}); |
|
each([ |
|
'lineDashOffset', 'lineCap', 'lineJoin', 'fontWeight', 'fontFamily', 'fontStyle', 'textAlign' |
|
], function (propName) { |
|
if (inheritedStyle[propName] != null) { |
|
disp.style[propName] = inheritedStyle[propName]; |
|
} |
|
}); |
|
if (isTextGroup) { |
|
disp.__selfStyle = selfStyle; |
|
} |
|
if (inheritedStyle.lineDash) { |
|
disp.style.lineDash = map(splitNumberSequence(inheritedStyle.lineDash), function (str) { |
|
return parseFloat(str); |
|
}); |
|
} |
|
if (inheritedStyle.visibility === 'hidden' || inheritedStyle.visibility === 'collapse') { |
|
disp.invisible = true; |
|
} |
|
if (inheritedStyle.display === 'none') { |
|
disp.ignore = true; |
|
} |
|
} |
|
function applyTextAlignment(text, parentGroup) { |
|
var parentSelfStyle = parentGroup.__selfStyle; |
|
if (parentSelfStyle) { |
|
var textBaseline = parentSelfStyle.textBaseline; |
|
var zrTextBaseline = textBaseline; |
|
if (!textBaseline || textBaseline === 'auto') { |
|
zrTextBaseline = 'alphabetic'; |
|
} |
|
else if (textBaseline === 'baseline') { |
|
zrTextBaseline = 'alphabetic'; |
|
} |
|
else if (textBaseline === 'before-edge' || textBaseline === 'text-before-edge') { |
|
zrTextBaseline = 'top'; |
|
} |
|
else if (textBaseline === 'after-edge' || textBaseline === 'text-after-edge') { |
|
zrTextBaseline = 'bottom'; |
|
} |
|
else if (textBaseline === 'central' || textBaseline === 'mathematical') { |
|
zrTextBaseline = 'middle'; |
|
} |
|
text.style.textBaseline = zrTextBaseline; |
|
} |
|
var parentInheritedStyle = parentGroup.__inheritedStyle; |
|
if (parentInheritedStyle) { |
|
var textAlign = parentInheritedStyle.textAlign; |
|
var zrTextAlign = textAlign; |
|
if (textAlign) { |
|
if (textAlign === 'middle') { |
|
zrTextAlign = 'center'; |
|
} |
|
text.style.textAlign = zrTextAlign; |
|
} |
|
} |
|
} |
|
var urlRegex = /^url\(\s*#(.*?)\)/; |
|
function getFillStrokeStyle(el, method, str, defsUsePending) { |
|
var urlMatch = str && str.match(urlRegex); |
|
if (urlMatch) { |
|
var url = trim(urlMatch[1]); |
|
defsUsePending.push([el, method, url]); |
|
return; |
|
} |
|
if (str === 'none') { |
|
str = null; |
|
} |
|
return str; |
|
} |
|
function applyDefs(defs, defsUsePending) { |
|
for (var i = 0; i < defsUsePending.length; i++) { |
|
var item = defsUsePending[i]; |
|
item[0].style[item[1]] = defs[item[2]]; |
|
} |
|
} |
|
var numberReg = /-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g; |
|
function splitNumberSequence(rawStr) { |
|
return rawStr.match(numberReg) || []; |
|
} |
|
var transformRegex = /(translate|scale|rotate|skewX|skewY|matrix)\(([\-\s0-9\.eE,]*)\)/g; |
|
var DEGREE_TO_ANGLE = Math.PI / 180; |
|
function parseTransformAttribute(xmlNode, node) { |
|
var transform = xmlNode.getAttribute('transform'); |
|
if (transform) { |
|
transform = transform.replace(/,/g, ' '); |
|
var transformOps_1 = []; |
|
var mt = null; |
|
transform.replace(transformRegex, function (str, type, value) { |
|
transformOps_1.push(type, value); |
|
return ''; |
|
}); |
|
for (var i = transformOps_1.length - 1; i > 0; i -= 2) { |
|
var value = transformOps_1[i]; |
|
var type = transformOps_1[i - 1]; |
|
var valueArr = splitNumberSequence(value); |
|
mt = mt || matrix.create(); |
|
switch (type) { |
|
case 'translate': |
|
matrix.translate(mt, mt, [parseFloat(valueArr[0]), parseFloat(valueArr[1] || '0')]); |
|
break; |
|
case 'scale': |
|
matrix.scale(mt, mt, [parseFloat(valueArr[0]), parseFloat(valueArr[1] || valueArr[0])]); |
|
break; |
|
case 'rotate': |
|
matrix.rotate(mt, mt, -parseFloat(valueArr[0]) * DEGREE_TO_ANGLE); |
|
break; |
|
case 'skewX': |
|
var sx = Math.tan(parseFloat(valueArr[0]) * DEGREE_TO_ANGLE); |
|
matrix.mul(mt, [1, 0, sx, 1, 0, 0], mt); |
|
break; |
|
case 'skewY': |
|
var sy = Math.tan(parseFloat(valueArr[0]) * DEGREE_TO_ANGLE); |
|
matrix.mul(mt, [1, sy, 0, 1, 0, 0], mt); |
|
break; |
|
case 'matrix': |
|
mt[0] = parseFloat(valueArr[0]); |
|
mt[1] = parseFloat(valueArr[1]); |
|
mt[2] = parseFloat(valueArr[2]); |
|
mt[3] = parseFloat(valueArr[3]); |
|
mt[4] = parseFloat(valueArr[4]); |
|
mt[5] = parseFloat(valueArr[5]); |
|
break; |
|
} |
|
} |
|
node.setLocalTransform(mt); |
|
} |
|
} |
|
var styleRegex = /([^\s:;]+)\s*:\s*([^:;]+)/g; |
|
function parseInlineStyle(xmlNode, inheritableStyleResult, selfStyleResult) { |
|
var style = xmlNode.getAttribute('style'); |
|
if (!style) { |
|
return; |
|
} |
|
styleRegex.lastIndex = 0; |
|
var styleRegResult; |
|
while ((styleRegResult = styleRegex.exec(style)) != null) { |
|
var svgStlAttr = styleRegResult[1]; |
|
var zrInheritableStlAttr = hasOwn(INHERITABLE_STYLE_ATTRIBUTES_MAP, svgStlAttr) |
|
? INHERITABLE_STYLE_ATTRIBUTES_MAP[svgStlAttr] |
|
: null; |
|
if (zrInheritableStlAttr) { |
|
inheritableStyleResult[zrInheritableStlAttr] = styleRegResult[2]; |
|
} |
|
var zrSelfStlAttr = hasOwn(SELF_STYLE_ATTRIBUTES_MAP, svgStlAttr) |
|
? SELF_STYLE_ATTRIBUTES_MAP[svgStlAttr] |
|
: null; |
|
if (zrSelfStlAttr) { |
|
selfStyleResult[zrSelfStlAttr] = styleRegResult[2]; |
|
} |
|
} |
|
} |
|
function parseAttributeStyle(xmlNode, inheritableStyleResult, selfStyleResult) { |
|
for (var i = 0; i < INHERITABLE_STYLE_ATTRIBUTES_MAP_KEYS.length; i++) { |
|
var svgAttrName = INHERITABLE_STYLE_ATTRIBUTES_MAP_KEYS[i]; |
|
var attrValue = xmlNode.getAttribute(svgAttrName); |
|
if (attrValue != null) { |
|
inheritableStyleResult[INHERITABLE_STYLE_ATTRIBUTES_MAP[svgAttrName]] = attrValue; |
|
} |
|
} |
|
for (var i = 0; i < SELF_STYLE_ATTRIBUTES_MAP_KEYS.length; i++) { |
|
var svgAttrName = SELF_STYLE_ATTRIBUTES_MAP_KEYS[i]; |
|
var attrValue = xmlNode.getAttribute(svgAttrName); |
|
if (attrValue != null) { |
|
selfStyleResult[SELF_STYLE_ATTRIBUTES_MAP[svgAttrName]] = attrValue; |
|
} |
|
} |
|
} |
|
export function makeViewBoxTransform(viewBoxRect, boundingRect) { |
|
var scaleX = boundingRect.width / viewBoxRect.width; |
|
var scaleY = boundingRect.height / viewBoxRect.height; |
|
var scale = Math.min(scaleX, scaleY); |
|
return { |
|
scale: scale, |
|
x: -(viewBoxRect.x + viewBoxRect.width / 2) * scale + (boundingRect.x + boundingRect.width / 2), |
|
y: -(viewBoxRect.y + viewBoxRect.height / 2) * scale + (boundingRect.y + boundingRect.height / 2) |
|
}; |
|
} |
|
export function parseSVG(xml, opt) { |
|
var parser = new SVGParser(); |
|
return parser.parse(xml, opt); |
|
} |
|
export { parseXML };
|
|
|