import Group from '../graphic/Group';
|
import ZRImage from '../graphic/Image';
|
import Circle from '../graphic/shape/Circle';
|
import Rect from '../graphic/shape/Rect';
|
import Ellipse from '../graphic/shape/Ellipse';
|
import Line from '../graphic/shape/Line';
|
import Polygon from '../graphic/shape/Polygon';
|
import Polyline from '../graphic/shape/Polyline';
|
import * as matrix from '../core/matrix';
|
import { createFromString } from './path';
|
import { defaults, trim, each, map, keys, hasOwn } from '../core/util';
|
import Displayable from '../graphic/Displayable';
|
import Element from '../Element';
|
import { RectLike } from '../core/BoundingRect';
|
import { Dictionary } from '../core/types';
|
import { PatternObject } from '../graphic/Pattern';
|
import LinearGradient, { LinearGradientObject } from '../graphic/LinearGradient';
|
import RadialGradient, { RadialGradientObject } from '../graphic/RadialGradient';
|
import Gradient, { GradientObject } from '../graphic/Gradient';
|
import TSpan, { TSpanStyleProps } from '../graphic/TSpan';
|
import { parseXML } from './parseXML';
|
|
|
interface SVGParserOption {
|
// Default width if svg width not specified or is a percent value.
|
width?: number;
|
// Default height if svg height not specified or is a percent value.
|
height?: number;
|
ignoreViewBox?: boolean;
|
ignoreRootClip?: boolean;
|
}
|
|
export interface SVGParserResult {
|
// Group, The root of the the result tree of zrender shapes
|
root: Group;
|
// number, the viewport width of the SVG
|
width: number;
|
// number, the viewport height of the SVG
|
height: number;
|
// {x, y, width, height}, the declared viewBox rect of the SVG, if exists
|
viewBoxRect: RectLike;
|
// the {scale, position} calculated by viewBox and viewport, is exists
|
viewBoxTransform: {
|
x: number;
|
y: number;
|
scale: number;
|
};
|
named: SVGParserResultNamedItem[];
|
}
|
export interface SVGParserResultNamedItem {
|
name: string;
|
// If a tag has no name attribute but its ancester <g> is named,
|
// `namedFrom` is set to the named item of the ancester <g>.
|
// Otherwise null/undefined
|
namedFrom: SVGParserResultNamedItem;
|
svgNodeTagLower: SVGNodeTagLower;
|
el: Element;
|
};
|
|
export type SVGNodeTagLower =
|
'g' | 'rect' | 'circle' | 'line' | 'ellipse' | 'polygon'
|
| 'polyline' | 'image' | 'text' | 'tspan' | 'path' | 'defs' | 'switch';
|
|
|
type DefsId = string;
|
type DefsMap = { [id in DefsId]: LinearGradientObject | RadialGradientObject | PatternObject };
|
type DefsUsePending = [Displayable, 'fill' | 'stroke', DefsId][];
|
|
type ElementExtended = Element & {
|
__inheritedStyle?: InheritedStyleByZRKey;
|
__selfStyle?: SelfStyleByZRKey;
|
}
|
type DisplayableExtended = Displayable & {
|
__inheritedStyle?: InheritedStyleByZRKey;
|
__selfStyle?: SelfStyleByZRKey;
|
}
|
|
type TextStyleOptionExtended = TSpanStyleProps & {
|
fontSize: number;
|
fontFamily: string;
|
fontWeight: string;
|
fontStyle: string;
|
}
|
let nodeParsers: {[name in SVGNodeTagLower]?: (
|
this: SVGParser, xmlNode: SVGElement, parentGroup: Group
|
) => Element};
|
|
type InheritedStyleByZRKey = {[name in InheritableStyleZRKey]?: string};
|
type InheritableStyleZRKey =
|
typeof INHERITABLE_STYLE_ATTRIBUTES_MAP[keyof typeof INHERITABLE_STYLE_ATTRIBUTES_MAP];
|
const 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'
|
} as const;
|
const INHERITABLE_STYLE_ATTRIBUTES_MAP_KEYS = keys(INHERITABLE_STYLE_ATTRIBUTES_MAP);
|
|
type SelfStyleByZRKey = {[name in SelfStyleZRKey]?: string};
|
type SelfStyleZRKey =
|
typeof SELF_STYLE_ATTRIBUTES_MAP[keyof typeof SELF_STYLE_ATTRIBUTES_MAP];
|
const SELF_STYLE_ATTRIBUTES_MAP = {
|
'alignment-baseline': 'textBaseline',
|
'stop-color': 'stopColor'
|
};
|
const SELF_STYLE_ATTRIBUTES_MAP_KEYS = keys(SELF_STYLE_ATTRIBUTES_MAP);
|
|
|
class SVGParser {
|
|
private _defs: DefsMap = {};
|
// The use of <defs> can be in front of <defs> declared.
|
// So save them temporarily in `_defsUsePending`.
|
private _defsUsePending: DefsUsePending;
|
private _root: Group = null;
|
|
private _textX: number;
|
private _textY: number;
|
|
parse(xml: string | Document | SVGElement, opt: SVGParserOption): SVGParserResult {
|
opt = opt || {};
|
|
const svg = parseXML(xml);
|
|
if (process.env.NODE_ENV !== 'production') {
|
if (!svg) {
|
throw new Error('Illegal svg');
|
}
|
}
|
|
this._defsUsePending = [];
|
let root = new Group();
|
this._root = root;
|
const named: SVGParserResult['named'] = [];
|
// parse view port
|
const viewBox = svg.getAttribute('viewBox') || '';
|
|
// If width/height not specified, means "100%" of `opt.width/height`.
|
// TODO: Other percent value not supported yet.
|
let width = parseFloat((svg.getAttribute('width') || opt.width) as string);
|
let height = parseFloat((svg.getAttribute('height') || opt.height) as string);
|
// If width/height not specified, set as null for output.
|
isNaN(width) && (width = null);
|
isNaN(height) && (height = null);
|
|
// Apply inline style on svg element.
|
parseAttributes(svg, root, null, true, false);
|
|
let child = svg.firstChild as SVGElement;
|
while (child) {
|
this._parseNode(child, root, named, null, false, false);
|
child = child.nextSibling as SVGElement;
|
}
|
|
applyDefs(this._defs, this._defsUsePending);
|
this._defsUsePending = [];
|
|
let viewBoxRect;
|
let viewBoxTransform;
|
|
if (viewBox) {
|
const viewBoxArr = splitNumberSequence(viewBox);
|
// Some invalid case like viewBox: 'none'.
|
if (viewBoxArr.length >= 4) {
|
viewBoxRect = {
|
x: parseFloat((viewBoxArr[0] || 0) as string),
|
y: parseFloat((viewBoxArr[1] || 0) as string),
|
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) {
|
// If set transform on the output group, it probably bring trouble when
|
// some users only intend to show the clipped content inside the viewBox,
|
// but not intend to transform the output group. So we keep the output
|
// group no transform. If the user intend to use the viewBox as a
|
// camera, just set `opt.ignoreViewBox` as `true` and set transfrom
|
// manually according to the viewBox info in the output of this method.
|
const elRoot = root;
|
root = new Group();
|
root.add(elRoot);
|
elRoot.scaleX = elRoot.scaleY = viewBoxTransform.scale;
|
elRoot.x = viewBoxTransform.x;
|
elRoot.y = viewBoxTransform.y;
|
}
|
}
|
|
// Some shapes might be overflow the viewport, which should be
|
// clipped despite whether the viewBox is used, as the SVG does.
|
if (!opt.ignoreRootClip && width != null && height != null) {
|
root.setClipPath(new Rect({
|
shape: {x: 0, y: 0, width: width, height: height}
|
}));
|
}
|
|
// Set width/height on group just for output the viewport size.
|
return {
|
root: root,
|
width: width,
|
height: height,
|
viewBoxRect: viewBoxRect,
|
viewBoxTransform: viewBoxTransform,
|
named: named
|
};
|
}
|
|
private _parseNode(
|
xmlNode: SVGElement,
|
parentGroup: Group,
|
named: SVGParserResultNamedItem[],
|
namedFrom: SVGParserResultNamedItem['namedFrom'],
|
isInDefs: boolean,
|
isInText: boolean
|
): void {
|
|
const nodeName = xmlNode.nodeName.toLowerCase() as SVGNodeTagLower;
|
|
// TODO:
|
// support <style>...</style> in svg, where nodeName is 'style',
|
// CSS classes is defined globally wherever the style tags are declared.
|
|
let el;
|
let namedFromForSub = namedFrom;
|
|
if (nodeName === 'defs') {
|
isInDefs = true;
|
}
|
if (nodeName === 'text') {
|
isInText = true;
|
}
|
|
if (nodeName === 'defs' || nodeName === 'switch') {
|
// Just make <switch> displayable. Do not support
|
// the full feature of it.
|
el = parentGroup;
|
}
|
else {
|
// In <defs>, elments will not be rendered.
|
// TODO:
|
// do not support elements in <defs> yet, until requirement come.
|
// other graphic elements can also be in <defs> and referenced by
|
// <use x="5" y="5" xlink:href="#myCircle" />
|
// multiple times
|
if (!isInDefs) {
|
const parser = nodeParsers[nodeName];
|
if (parser && hasOwn(nodeParsers, nodeName)) {
|
|
el = parser.call(this, xmlNode, parentGroup);
|
|
// Do not support empty string;
|
const nameAttr = xmlNode.getAttribute('name');
|
if (nameAttr) {
|
const newNamed: SVGParserResultNamedItem = {
|
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);
|
}
|
}
|
|
// Whether gradients/patterns are declared in <defs> or not,
|
// they all work.
|
const parser = paintServerParsers[nodeName];
|
if (parser && hasOwn(paintServerParsers, nodeName)) {
|
const def = parser.call(this, xmlNode);
|
const id = xmlNode.getAttribute('id');
|
if (id) {
|
this._defs[id] = def;
|
}
|
}
|
}
|
|
// If xmlNode is <g>, <text>, <tspan>, <defs>, <switch>,
|
// el will be a group, and traverse the children.
|
if (el && el.isGroup) {
|
let child = xmlNode.firstChild as SVGElement;
|
while (child) {
|
if (child.nodeType === 1) {
|
this._parseNode(child, el as Group, named, namedFromForSub, isInDefs, isInText);
|
}
|
// Is plain text rather than a tagged node.
|
else if (child.nodeType === 3 && isInText) {
|
this._parseText(child, el as Group);
|
}
|
child = child.nextSibling as SVGElement;
|
}
|
}
|
|
}
|
|
private _parseText(xmlNode: SVGElement, parentGroup: Group): TSpan {
|
const 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);
|
|
const textStyle = text.style as TextStyleOptionExtended;
|
const fontSize = textStyle.fontSize;
|
if (fontSize && fontSize < 9) {
|
// PENDING
|
textStyle.fontSize = 9;
|
text.scaleX *= fontSize / 9;
|
text.scaleY *= fontSize / 9;
|
}
|
|
const font = (textStyle.fontSize || textStyle.fontFamily) && [
|
textStyle.fontStyle,
|
textStyle.fontWeight,
|
(textStyle.fontSize || 12) + 'px',
|
// If font properties are defined, `fontFamily` should not be ignored.
|
textStyle.fontFamily || 'sans-serif'
|
].join(' ');
|
// Make font
|
textStyle.font = font;
|
|
const rect = text.getBoundingRect();
|
this._textX += rect.width;
|
|
parentGroup.add(text);
|
|
return text;
|
}
|
|
static internalField = (function () {
|
|
nodeParsers = {
|
'g': function (xmlNode, parentGroup) {
|
const g = new Group();
|
inheritStyle(parentGroup, g);
|
parseAttributes(xmlNode, g, this._defsUsePending, false, false);
|
|
return g;
|
},
|
'rect': function (xmlNode, parentGroup) {
|
const 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) {
|
const 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) {
|
const 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) {
|
const 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) {
|
const pointsStr = xmlNode.getAttribute('points');
|
let pointsArr;
|
if (pointsStr) {
|
pointsArr = parsePoints(pointsStr);
|
}
|
const polygon = new Polygon({
|
shape: {
|
points: pointsArr || []
|
},
|
silent: true
|
});
|
|
inheritStyle(parentGroup, polygon);
|
parseAttributes(xmlNode, polygon, this._defsUsePending, false, false);
|
|
return polygon;
|
},
|
'polyline': function (xmlNode, parentGroup) {
|
const pointsStr = xmlNode.getAttribute('points');
|
let pointsArr;
|
if (pointsStr) {
|
pointsArr = parsePoints(pointsStr);
|
}
|
const polyline = new Polyline({
|
shape: {
|
points: pointsArr || []
|
},
|
silent: true
|
});
|
|
inheritStyle(parentGroup, polyline);
|
parseAttributes(xmlNode, polyline, this._defsUsePending, false, false);
|
|
return polyline;
|
},
|
'image': function (xmlNode, parentGroup) {
|
const 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) {
|
const x = xmlNode.getAttribute('x') || '0';
|
const y = xmlNode.getAttribute('y') || '0';
|
const dx = xmlNode.getAttribute('dx') || '0';
|
const dy = xmlNode.getAttribute('dy') || '0';
|
|
this._textX = parseFloat(x) + parseFloat(dx);
|
this._textY = parseFloat(y) + parseFloat(dy);
|
|
const g = new Group();
|
inheritStyle(parentGroup, g);
|
parseAttributes(xmlNode, g, this._defsUsePending, false, true);
|
|
return g;
|
},
|
'tspan': function (xmlNode, parentGroup) {
|
const x = xmlNode.getAttribute('x');
|
const y = xmlNode.getAttribute('y');
|
if (x != null) {
|
// new offset x
|
this._textX = parseFloat(x);
|
}
|
if (y != null) {
|
// new offset y
|
this._textY = parseFloat(y);
|
}
|
const dx = xmlNode.getAttribute('dx') || '0';
|
const dy = xmlNode.getAttribute('dy') || '0';
|
|
const 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) {
|
// TODO svg fill rule
|
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule
|
// path.style.globalCompositeOperation = 'xor';
|
const d = xmlNode.getAttribute('d') || '';
|
|
// Performance sensitive.
|
|
const path = createFromString(d);
|
|
inheritStyle(parentGroup, path);
|
parseAttributes(xmlNode, path, this._defsUsePending, false, false);
|
|
path.silent = true;
|
|
return path;
|
}
|
};
|
|
|
})();
|
}
|
|
const paintServerParsers: Dictionary<(xmlNode: SVGElement) => any> = {
|
|
'lineargradient': function (xmlNode: SVGElement) {
|
// TODO:
|
// Support that x1,y1,x2,y2 are not declared lineargradient but in node.
|
const x1 = parseInt(xmlNode.getAttribute('x1') || '0', 10);
|
const y1 = parseInt(xmlNode.getAttribute('y1') || '0', 10);
|
const x2 = parseInt(xmlNode.getAttribute('x2') || '10', 10);
|
const y2 = parseInt(xmlNode.getAttribute('y2') || '0', 10);
|
|
const gradient = new LinearGradient(x1, y1, x2, y2);
|
|
parsePaintServerUnit(xmlNode, gradient);
|
|
parseGradientColorStops(xmlNode, gradient);
|
|
return gradient;
|
},
|
|
'radialgradient': function (xmlNode) {
|
// TODO:
|
// Support that x1,y1,x2,y2 are not declared radialgradient but in node.
|
// TODO:
|
// Support fx, fy, fr.
|
const cx = parseInt(xmlNode.getAttribute('cx') || '0', 10);
|
const cy = parseInt(xmlNode.getAttribute('cy') || '0', 10);
|
const r = parseInt(xmlNode.getAttribute('r') || '0', 10);
|
|
const gradient = new RadialGradient(cx, cy, r);
|
|
parsePaintServerUnit(xmlNode, gradient);
|
|
parseGradientColorStops(xmlNode, gradient);
|
|
return gradient;
|
}
|
|
// TODO
|
// 'pattern': function (xmlNode: SVGElement) {
|
// }
|
};
|
|
function parsePaintServerUnit(xmlNode: SVGElement, gradient: Gradient) {
|
const gradientUnits = xmlNode.getAttribute('gradientUnits');
|
if (gradientUnits === 'userSpaceOnUse') {
|
gradient.global = true;
|
}
|
}
|
|
function parseGradientColorStops(xmlNode: SVGElement, gradient: GradientObject): void {
|
|
let stop = xmlNode.firstChild as SVGStopElement;
|
|
while (stop) {
|
if (stop.nodeType === 1
|
// there might be some other irrelevant tags used by editor.
|
&& stop.nodeName.toLocaleLowerCase() === 'stop'
|
) {
|
const offsetStr = stop.getAttribute('offset');
|
let offset: number;
|
if (offsetStr && offsetStr.indexOf('%') > 0) { // percentage
|
offset = parseInt(offsetStr, 10) / 100;
|
}
|
else if (offsetStr) { // number from 0 to 1
|
offset = parseFloat(offsetStr);
|
}
|
else {
|
offset = 0;
|
}
|
|
// <stop style="stop-color:red"/> has higher priority than
|
// <stop stop-color="red"/>
|
const styleVals = {} as Dictionary<string>;
|
parseInlineStyle(stop, styleVals, styleVals);
|
const stopColor = styleVals.stopColor
|
|| stop.getAttribute('stop-color')
|
|| '#000000';
|
|
gradient.colorStops.push({
|
offset: offset,
|
color: stopColor
|
});
|
}
|
stop = stop.nextSibling as SVGStopElement;
|
}
|
}
|
|
function inheritStyle(parent: Element, child: Element): void {
|
if (parent && (parent as ElementExtended).__inheritedStyle) {
|
if (!(child as ElementExtended).__inheritedStyle) {
|
(child as ElementExtended).__inheritedStyle = {};
|
}
|
defaults((child as ElementExtended).__inheritedStyle, (parent as ElementExtended).__inheritedStyle);
|
}
|
}
|
|
function parsePoints(pointsString: string): number[][] {
|
const list = splitNumberSequence(pointsString);
|
const points = [];
|
|
for (let i = 0; i < list.length; i += 2) {
|
const x = parseFloat(list[i]);
|
const y = parseFloat(list[i + 1]);
|
points.push([x, y]);
|
}
|
return points;
|
}
|
|
function parseAttributes(
|
xmlNode: SVGElement,
|
el: Element,
|
defsUsePending: DefsUsePending,
|
onlyInlineStyle: boolean,
|
isTextGroup: boolean
|
): void {
|
const disp = el as DisplayableExtended;
|
const inheritedStyle = disp.__inheritedStyle = disp.__inheritedStyle || {};
|
const selfStyle: SelfStyleByZRKey = {};
|
|
// TODO Shadow
|
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'
|
] as const, function (propName) {
|
if (inheritedStyle[propName] != null) {
|
disp.style[propName] = parseFloat(inheritedStyle[propName]);
|
}
|
});
|
|
each([
|
'lineDashOffset', 'lineCap', 'lineJoin', 'fontWeight', 'fontFamily', 'fontStyle', 'textAlign'
|
] as const, function (propName) {
|
if (inheritedStyle[propName] != null) {
|
disp.style[propName] = inheritedStyle[propName];
|
}
|
});
|
|
// Because selfStyle only support textBaseline, so only text group need it.
|
// in other cases selfStyle can be released.
|
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: TSpan,
|
parentGroup: Group
|
): void {
|
const parentSelfStyle = (parentGroup as ElementExtended).__selfStyle;
|
if (parentSelfStyle) {
|
const textBaseline = parentSelfStyle.textBaseline;
|
let zrTextBaseline = textBaseline as CanvasTextBaseline;
|
if (!textBaseline || textBaseline === 'auto') {
|
// FIXME: 'auto' means the value is the dominant-baseline of the script to
|
// which the character belongs - i.e., use the dominant-baseline of the parent.
|
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;
|
}
|
|
const parentInheritedStyle = (parentGroup as ElementExtended).__inheritedStyle;
|
if (parentInheritedStyle) {
|
// PENDING:
|
// canvas `direction` is an experimental attribute.
|
// so we do not support SVG direction "rtl" for text-anchor yet.
|
const textAlign = parentInheritedStyle.textAlign;
|
let zrTextAlign = textAlign as CanvasTextAlign;
|
if (textAlign) {
|
if (textAlign === 'middle') {
|
zrTextAlign = 'center';
|
}
|
text.style.textAlign = zrTextAlign;
|
}
|
}
|
}
|
|
// Support `fill:url(#someId)`.
|
const urlRegex = /^url\(\s*#(.*?)\)/;
|
function getFillStrokeStyle(
|
el: Displayable,
|
method: 'fill' | 'stroke',
|
str: string,
|
defsUsePending: DefsUsePending
|
): string {
|
const urlMatch = str && str.match(urlRegex);
|
if (urlMatch) {
|
const url = trim(urlMatch[1]);
|
defsUsePending.push([el, method, url]);
|
return;
|
}
|
// SVG fill and stroke can be 'none'.
|
if (str === 'none') {
|
str = null;
|
}
|
return str;
|
}
|
|
function applyDefs(
|
defs: DefsMap,
|
defsUsePending: DefsUsePending
|
): void {
|
for (let i = 0; i < defsUsePending.length; i++) {
|
const item = defsUsePending[i];
|
item[0].style[item[1]] = defs[item[2]];
|
}
|
}
|
|
// value can be like:
|
// '2e-4', 'l.5.9' (ignore 0), 'M-10-10', 'l-2.43e-1,34.9983',
|
// 'l-.5E1,54', '121-23-44-11' (no delimiter)
|
// PENDING: here continuous commas are treat as one comma, but the
|
// browser SVG parser treats this by printing error.
|
const numberReg = /-?([0-9]*\.)?[0-9]+([eE]-?[0-9]+)?/g;
|
function splitNumberSequence(rawStr: string): string[] {
|
return rawStr.match(numberReg) || [];
|
}
|
// Most of the values can be separated by comma and/or white space.
|
// const DILIMITER_REG = /[\s,]+/;
|
|
|
const transformRegex = /(translate|scale|rotate|skewX|skewY|matrix)\(([\-\s0-9\.eE,]*)\)/g;
|
const DEGREE_TO_ANGLE = Math.PI / 180;
|
|
function parseTransformAttribute(xmlNode: SVGElement, node: Element): void {
|
let transform = xmlNode.getAttribute('transform');
|
if (transform) {
|
transform = transform.replace(/,/g, ' ');
|
const transformOps: string[] = [];
|
let mt = null;
|
transform.replace(transformRegex, function (str: string, type: string, value: string) {
|
transformOps.push(type, value);
|
return '';
|
});
|
|
for (let i = transformOps.length - 1; i > 0; i -= 2) {
|
const value = transformOps[i];
|
const type = transformOps[i - 1];
|
const valueArr: string[] = 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':
|
// TODO: zrender use different hand in coordinate system.
|
matrix.rotate(mt, mt, -parseFloat(valueArr[0]) * DEGREE_TO_ANGLE, [
|
parseFloat(valueArr[1] || '0'),
|
parseFloat(valueArr[2] || '0')
|
]);
|
break;
|
case 'skewX':
|
const sx = Math.tan(parseFloat(valueArr[0]) * DEGREE_TO_ANGLE);
|
matrix.mul(mt, [1, 0, sx, 1, 0, 0], mt);
|
break;
|
case 'skewY':
|
const 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);
|
}
|
}
|
|
// Value may contain space.
|
const styleRegex = /([^\s:;]+)\s*:\s*([^:;]+)/g;
|
function parseInlineStyle(
|
xmlNode: SVGElement,
|
inheritableStyleResult: Dictionary<string>,
|
selfStyleResult: Dictionary<string>
|
): void {
|
const style = xmlNode.getAttribute('style');
|
|
if (!style) {
|
return;
|
}
|
|
styleRegex.lastIndex = 0;
|
let styleRegResult;
|
while ((styleRegResult = styleRegex.exec(style)) != null) {
|
const svgStlAttr = styleRegResult[1];
|
|
const zrInheritableStlAttr = hasOwn(INHERITABLE_STYLE_ATTRIBUTES_MAP, svgStlAttr)
|
? INHERITABLE_STYLE_ATTRIBUTES_MAP[svgStlAttr as keyof typeof INHERITABLE_STYLE_ATTRIBUTES_MAP]
|
: null;
|
if (zrInheritableStlAttr) {
|
inheritableStyleResult[zrInheritableStlAttr] = styleRegResult[2];
|
}
|
|
const zrSelfStlAttr = hasOwn(SELF_STYLE_ATTRIBUTES_MAP, svgStlAttr)
|
? SELF_STYLE_ATTRIBUTES_MAP[svgStlAttr as keyof typeof SELF_STYLE_ATTRIBUTES_MAP]
|
: null;
|
if (zrSelfStlAttr) {
|
selfStyleResult[zrSelfStlAttr] = styleRegResult[2];
|
}
|
}
|
}
|
|
function parseAttributeStyle(
|
xmlNode: SVGElement,
|
inheritableStyleResult: Dictionary<string>,
|
selfStyleResult: Dictionary<string>
|
): void {
|
for (let i = 0; i < INHERITABLE_STYLE_ATTRIBUTES_MAP_KEYS.length; i++) {
|
const svgAttrName = INHERITABLE_STYLE_ATTRIBUTES_MAP_KEYS[i];
|
const attrValue = xmlNode.getAttribute(svgAttrName);
|
if (attrValue != null) {
|
inheritableStyleResult[INHERITABLE_STYLE_ATTRIBUTES_MAP[svgAttrName]] = attrValue;
|
}
|
}
|
for (let i = 0; i < SELF_STYLE_ATTRIBUTES_MAP_KEYS.length; i++) {
|
const svgAttrName = SELF_STYLE_ATTRIBUTES_MAP_KEYS[i];
|
const attrValue = xmlNode.getAttribute(svgAttrName);
|
if (attrValue != null) {
|
selfStyleResult[SELF_STYLE_ATTRIBUTES_MAP[svgAttrName]] = attrValue;
|
}
|
}
|
}
|
|
export function makeViewBoxTransform(viewBoxRect: RectLike, boundingRect: RectLike): {
|
scale: number;
|
x: number;
|
y: number;
|
} {
|
const scaleX = boundingRect.width / viewBoxRect.width;
|
const scaleY = boundingRect.height / viewBoxRect.height;
|
const scale = Math.min(scaleX, scaleY);
|
// preserveAspectRatio 'xMidYMid'
|
|
return {
|
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: string | Document | SVGElement, opt: SVGParserOption): SVGParserResult {
|
const parser = new SVGParser();
|
return parser.parse(xml, opt);
|
}
|
|
|
// Also export parseXML to avoid breaking change.
|
export {parseXML};
|
