diff --git a/README.md b/README.md index 28ace49ae..80677eb59 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ ZRender A lightweight graphic library which provides 2d draw for [Apache ECharts](https://github.com/apache/echarts). -[![](https://img.shields.io/github/actions/workflow/status/ecomfe/zrender/ci.yml)]() [![](https://img.shields.io/npm/dw/zrender.svg?label=npm%20downloads&style=flat)](https://www.npmjs.com/package/zrender) ![Commits Since 4.0.0](https://img.shields.io/github/commits-since/ecomfe/zrender/4.0.0.svg?colorB=%234c1&style=flat) +[![](https://img.shields.io/github/actions/workflow/status/ecomfe/zrender/ci.yml)](https://github.com/ecomfe/zrender/actions) [![](https://img.shields.io/npm/dw/zrender.svg?label=npm%20downloads&style=flat)](https://www.npmjs.com/package/zrender) ![Commits Since 4.0.0](https://img.shields.io/github/commits-since/ecomfe/zrender/4.0.0.svg?colorB=%234c1&style=flat) ## Documentation diff --git a/src/canvas/graphic.ts b/src/canvas/graphic.ts index fb3a145eb..72d554fbf 100644 --- a/src/canvas/graphic.ts +++ b/src/canvas/graphic.ts @@ -152,7 +152,7 @@ function brushPath(ctx: CanvasRenderingContext2D, el: Path, style: PathStyleProp strokePattern = (dirtyFlag || !el.__canvasStrokePattern) ? createCanvasPattern(ctx, stroke as ImagePatternObject, el) : el.__canvasStrokePattern; - el.__canvasStrokePattern = fillPattern; + el.__canvasStrokePattern = strokePattern; } // Use the gradient or pattern if (hasFillGradient) { diff --git a/src/core/dom.ts b/src/core/dom.ts index fd74b89eb..53fda5e27 100644 --- a/src/core/dom.ts +++ b/src/core/dom.ts @@ -2,6 +2,7 @@ import env from './env'; import {buildTransformer} from './fourPointsTransform'; import {Dictionary} from './types'; +import { each } from './util'; const EVENT_SAVED_PROP = '___zrEVENTSAVED'; const _calcOut: number[] = []; @@ -11,6 +12,7 @@ type SavedInfo = { trans?: ReturnType invTrans?: ReturnType srcCoords?: number[] + clearMarkers?: () => void } /** @@ -57,6 +59,22 @@ export function transformLocalCoord( && transformCoordWithViewport(out, elTarget, _calcOut[0], _calcOut[1]); } +export function transformLocalCoordClear( + elFrom: HTMLElement, + elTarget: HTMLElement, +) { + elFrom && dealClear(elFrom); + elTarget && dealClear(elTarget); + + function dealClear(el: HTMLElement) { + const saved: SavedInfo = (el as any)[EVENT_SAVED_PROP]; + if (saved) { + saved.clearMarkers && saved.clearMarkers(); + delete (el as any)[EVENT_SAVED_PROP]; + } + } +} + /** * Transform between a "viewport coord" and a "local coord". * "viewport coord": the coord based on the left-top corner of the viewport @@ -134,6 +152,12 @@ function prepareCoordMarkers(el: HTMLElement, saved: SavedInfo) { markers.push(marker); } + saved.clearMarkers = function () { + each(markers, function (marker) { + marker.parentNode && marker.parentNode.removeChild(marker); + }); + }; + return markers; } diff --git a/src/core/env.ts b/src/core/env.ts index 52e3699ae..4d8cc99f9 100644 --- a/src/core/env.ts +++ b/src/core/env.ts @@ -37,7 +37,12 @@ else if (typeof document === 'undefined' && typeof self !== 'undefined') { // In worker env.worker = true; } -else if (!env.hasGlobalWindow || 'Deno' in window) { +else if ( + !env.hasGlobalWindow + || 'Deno' in window + || (typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string' + && navigator.userAgent.indexOf('Node.js') > -1) +) { // In node env.node = true; env.svgSupported = true; @@ -85,29 +90,31 @@ function detect(ua: string, env: Env) { env.touchEventsSupported = 'ontouchstart' in window && !browser.ie && !browser.edge; env.pointerEventsSupported = 'onpointerdown' in window && (browser.edge || (browser.ie && +browser.version >= 11)); - env.domSupported = typeof document !== 'undefined'; - - const style = document.documentElement.style; - - env.transform3dSupported = ( - // IE9 only supports transform 2D - // transform 3D supported since IE10 - // we detect it by whether 'transition' is in style - (browser.ie && 'transition' in style) - // edge - || browser.edge - // webkit - || (('WebKitCSSMatrix' in window) && ('m11' in new WebKitCSSMatrix())) - // gecko-based browsers - || 'MozPerspective' in style - ) // Opera supports CSS transforms after version 12 - && !('OTransition' in style); - - // except IE 6-8 and very old firefox 2-3 & opera 10.1 - // other browsers all support `transform` - env.transformSupported = env.transform3dSupported - // transform 2D is supported in IE9 - || (browser.ie && +browser.version >= 9); + + const domSupported = env.domSupported = typeof document !== 'undefined'; + if (domSupported) { + const style = document.documentElement.style; + + env.transform3dSupported = ( + // IE9 only supports transform 2D + // transform 3D supported since IE10 + // we detect it by whether 'transition' is in style + (browser.ie && 'transition' in style) + // edge + || browser.edge + // webkit + || (('WebKitCSSMatrix' in window) && ('m11' in new WebKitCSSMatrix())) + // gecko-based browsers + || 'MozPerspective' in style + ) // Opera supports CSS transforms after version 12 + && !('OTransition' in style); + + // except IE 6-8 and very old firefox 2-3 & opera 10.1 + // other browsers all support `transform` + env.transformSupported = env.transform3dSupported + // transform 2D is supported in IE9 + || (browser.ie && +browser.version >= 9); + } } diff --git a/src/tool/color.ts b/src/tool/color.ts index ae912e3fe..1be9f87a5 100644 --- a/src/tool/color.ts +++ b/src/tool/color.ts @@ -93,7 +93,7 @@ function clampCssFloat(f: number): number { // Clamp to float 0.0 .. 1.0. return f < 0 ? 0 : f > 1 ? 1 : f; } -function parseCssInt(val: string | number): number { // int or percentage. +export function parseCssInt(val: string | number): number { // int or percentage. let str = val as string; if (str.length && str.charAt(str.length - 1) === '%') { return clampCssByte(parseFloat(str) / 100 * 255); @@ -101,7 +101,7 @@ function parseCssInt(val: string | number): number { // int or percentage. return clampCssByte(parseInt(str, 10)); } -function parseCssFloat(val: string | number): number { // float or percentage. +export function parseCssFloat(val: string | number): number { // float or percentage. let str = val as string; if (str.length && str.charAt(str.length - 1) === '%') { return clampCssFloat(parseFloat(str) / 100); diff --git a/src/tool/parseSVG.ts b/src/tool/parseSVG.ts index 0ee2739a6..5d0587042 100644 --- a/src/tool/parseSVG.ts +++ b/src/tool/parseSVG.ts @@ -19,6 +19,7 @@ import RadialGradient, { RadialGradientObject } from '../graphic/RadialGradient' import Gradient, { GradientObject } from '../graphic/Gradient'; import TSpan, { TSpanStyleProps } from '../graphic/TSpan'; import { parseXML } from './parseXML'; +import * as colorTool from './color'; interface SVGParserOption { @@ -627,9 +628,19 @@ function parseGradientColorStops(xmlNode: SVGElement, gradient: GradientObject): // const styleVals = {} as Dictionary; parseInlineStyle(stop, styleVals, styleVals); - const stopColor = styleVals.stopColor + let stopColor = styleVals.stopColor || stop.getAttribute('stop-color') || '#000000'; + const stopOpacity = styleVals.stopOpacity + || stop.getAttribute('stop-opacity'); + if (stopOpacity) { + const rgba = colorTool.parse(stopColor); + const stopColorOpacity = rgba && rgba[3]; + if (stopColorOpacity) { + rgba[3] *= colorTool.parseCssFloat(stopOpacity); + stopColor = colorTool.stringify(rgba, 'rgba'); + } + } gradient.colorStops.push({ offset: offset, diff --git a/test/parser-svg-stop-opacity.html b/test/parser-svg-stop-opacity.html new file mode 100644 index 000000000..70b30a11b --- /dev/null +++ b/test/parser-svg-stop-opacity.html @@ -0,0 +1,51 @@ + + + + + Parse SVG stop-opacity + + + + +
+ ZRender.parseSVG: +
+ Original SVG: +
+
+ + + \ No newline at end of file