{"record":{"id":"afe5ebfe34ba342d","repo":"juliangarnier/anime","slug":"can-t-morph-a-path1-tagname-svg-element-use","errorCode":null,"errorMessage":"Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.","messagePattern":"Can't morph a <(.+?)> SVG element\\. Use <path>, <polygon> or <polyline>\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/svg/morphto.js","lineNumber":24,"sourceCode":"  getPath,\n} from './helpers.js';\n\n/**\n * @import {\n *   TargetsParam,\n *   FunctionValue\n * } from '../types/index.js'\n*/\n\n/**\n * @param  {TargetsParam} path2\n * @param  {Number} [precision]\n * @return {FunctionValue}\n */\nexport const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {\n  const tagName1 = ($path1.tagName || '').toLowerCase();\n  if (!tagName1.match(/^(path|polygon|polyline)$/)) {\n    throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);\n  }\n  const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));\n  if (!$path2) {\n    throw new Error(\"Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.\");\n  }\n  const tagName2 = ($path2.tagName || '').toLowerCase();\n  if (!tagName2.match(/^(path|polygon|polyline)$/)) {\n    throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);\n  }\n  const isPath = $path1.tagName === 'path';\n  const separator = isPath ? ' ' : ',';\n  const previousPoints = prevTween ? prevTween._value : null;\n  if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);\n\n  let v1 = '', v2 = '';\n\n  if (!precision) {\n    v1 = $path1.getAttribute(isPath ? 'd' : 'points');","sourceCodeStart":6,"sourceCodeEnd":42,"githubUrl":"https://github.com/juliangarnier/anime/blob/01b81be1df6843ccfe0a71c0699a746bf740dd77/src/svg/morphto.js#L6-L42","documentation":"Error \"Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.\" thrown in juliangarnier/anime.","triggerScenarios":"Thrown at src/svg/morphto.js:24 when the library encounters an invalid state.","commonSituations":"See trigger scenarios.","solutions":["Change the animated element to a <path>, <polygon> or <polyline> SVG element before applying the morph.","If the shape is a <rect>, <circle> or other shape, convert it to an equivalent <path> (e.g. with an SVG editor) and target that instead."],"exampleFix":"// Wrong: morphing a <rect>\nsvg.morphTo('#target')($rect);\n// Fix: use a morphable element\n// <path id=\"source\" d=\"M0 0 H100 V100 H0 Z\"/>\nsvg.morphTo('#target')($path);","handlingStrategy":null,"validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"01b81be1df6843ccfe0a71c0699a746bf740dd77","analyzedAt":"2026-08-12T23:45:07.335Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}