import { buildHTMLStyles } from '../../html/utils/build-styles.mjs'; import { buildSVGPath } from './path.mjs'; /** * Values rendered via style rather than as attributes. This must include * every value WAAPI can accelerate, as WAAPI writes its final value to * style, which would otherwise override later attribute writes. */ const cssStyleProperties = [ "transform", "opacity", "clipPath", "filter", "offsetDistance", "offsetPath", "offsetRotate", "offsetAnchor", ]; /** * Build SVG visual attributes, like cx and style.transform */ function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, // This is object creation, which we try to avoid per-frame. ...latest }, isSVGTag, transformTemplate, styleProp) { buildHTMLStyles(state, latest, transformTemplate); /** * For svg tags we just want to make sure viewBox is animatable and treat all the styles * as normal HTML tags. */ if (isSVGTag) { if (state.style.viewBox) { state.attrs.viewBox = state.style.viewBox; } return; } state.attrs = state.style; state.style = {}; const { attrs, style } = state; for (const key of cssStyleProperties) { if (attrs[key] !== undefined) { style[key] = attrs[key]; delete attrs[key]; } } if (style.transform || attrs.transformOrigin) { style.transformOrigin = attrs.transformOrigin ?? "50% 50%"; delete attrs.transformOrigin; } if (style.transform) { /** * SVG's element transform-origin uses its own median as a reference. * Therefore, transformBox becomes a fill-box */ style.transformBox = styleProp?.transformBox ?? "fill-box"; delete attrs.transformBox; } // Render attrX/attrY/attrScale as attributes if (attrX !== undefined) attrs.x = attrX; if (attrY !== undefined) attrs.y = attrY; if (attrScale !== undefined) attrs.scale = attrScale; // Build SVG path if one has been defined if (pathLength !== undefined) { buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false); } } export { buildSVGAttrs, cssStyleProperties }; //# sourceMappingURL=build-attrs.mjs.map