juliangarnier/anime · error · Error

Can't morph a <${$path2.tagName}> SVG element. Use <path>, <

Error message

Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.

What it means

Error "Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>." thrown in juliangarnier/anime.

Source

Thrown at src/svg/morphto.js:32

*/

/**
 * @param  {TargetsParam} path2
 * @param  {Number} [precision]
 * @return {FunctionValue}
 */
export const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
  const tagName1 = ($path1.tagName || '').toLowerCase();
  if (!tagName1.match(/^(path|polygon|polyline)$/)) {
    throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
  }
  const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
  if (!$path2) {
    throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
  }
  const tagName2 = ($path2.tagName || '').toLowerCase();
  if (!tagName2.match(/^(path|polygon|polyline)$/)) {
    throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
  }
  const isPath = $path1.tagName === 'path';
  const separator = isPath ? ' ' : ',';
  const previousPoints = prevTween ? prevTween._value : null;
  if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);

  let v1 = '', v2 = '';

  if (!precision) {
    v1 = $path1.getAttribute(isPath ? 'd' : 'points');
    v2 = $path2.getAttribute(isPath ? 'd' : 'points');
  } else {
    const length1 = /** @type {SVGGeometryElement} */($path1).getTotalLength();
    const length2 = $path2.getTotalLength();
    const maxPoints = Math.max(Math.ceil(length1 * precision), Math.ceil(length2 * precision));
    for (let i = 0; i < maxPoints; i++) {
      const t = i / (maxPoints - 1);
      const pointOnPath1 = /** @type {SVGGeometryElement} */($path1).getPointAtLength(length1 * t);

View on GitHub (pinned to 01b81be1df)

Solutions

1. Make the morph target a <path>, <polygon> or <polyline> element; other SVG shapes are not supported.
2. Convert the target shape (e.g. <rect>, <circle>) into an equivalent <path> and morph to that instead.

Example fix

// Wrong: target is a <circle>
svg.morphTo('#circleTarget');
// Fix: target a morphable element
// <path id="target" d="M50 10 A40 40 0 1 1 49.9 10 Z"/>
svg.morphTo('#target');

When it happens

Trigger: Thrown at src/svg/morphto.js:32 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of juliangarnier/anime@01b81be1df (2026-08-12). Data as JSON: /api/errors/b6146a9e6272e0d4. Report an issue: GitHub.