通过 SVG 动画对 MathJax 进行动画处理

如何解决通过 SVG 动画对 MathJax 进行动画处理

我知道 MathJax 符号是 SVG 图表，因为 SVG 图表可以像这样轻松动画：

svg {
  width: 150px;
}

svg:hover path {
  d: path("M8,2 L2,8 L2,8");
}

svg path {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 2s;
}

<svg viewBox="0 0 10 10">
  <path d="M2,2 L8,8" />
</svg>

<p>Hover to see the animation.</p>

我想到了通过 SVG 为 MathJax 制作动画。只有一个问题：与上面的 SVG 一样，悬停图应该只是两个命令图 ("M8,8")。而且本质上是，最后4条命令是多余的......直到你意识到原始SVG路径和悬停路径中的命令数量应该相等，否则......

svg {
  width: 150px;
}

svg:hover path {
  d: path("M8,8" />
</svg>

<p>No animation on hover!</p>

动画不起作用。

从 this 网站调整 MathJax-to-SVG 代码后，这些是 MathJax 中 x 字母和 = 符号的路径。

svg {
  width: 150px;
  border: 2px dotted gray;
}

<svg viewBox="0 -442 900 453">
    <path transform="matrix(1 0 0 -1 0 0)" 
          d="M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289" />
</svg>

<svg viewBox="0 -442 900 453">
    <path transform="matrix(1 0 0 -1 0 0)" 
          d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153" />
</svg>

我用 JavaScript 编写了一个脚本（最初是用 Python 编写的，但只是用于现场解决方案......），它将使 x 和 = 路径中的命令数量相等（只需一次又一次地添加最后一个命令） .

let xPath = "M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289"
let equalsPath = "M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153"

function lettersInString(string) {
  alpha_counter = 0;
  for (let i = 0; i < string.length; i++) {
    if (string[i].match(/[a-zA-Z]/i)) {
      alpha_counter += 1;
    }
  }
  return alpha_counter;
}

let newEqualsPath = equalsPath + "Q56 140 56 153".repeat(lettersInString(xPath) - lettersInString(equalsPath))

document.getElementById('path').innerHTML = newEqualsPath;

<p>New Equals Path: <code id="path"></code></p>

但在尝试时：

svg {
  width: 150px;
}

svg path {
  transition: 2s;
}

svg:hover path {
  d: path("M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153Q56 140 56 153");
}

<svg viewBox="0 -442 900 453">
    <path transform="matrix(1 0 0 -1 0 0)" 
          d="M52 289Q59 331 106 386T222 442Q257 442 286 424T329 379Q371 442 430 442Q467 442 494 420T522 361Q522 332 508 314T481 292T458 288Q439 288 427 299T415 328Q415 374 465 391Q454 404 425 404Q412 404 406 402Q368 386 350 336Q290 115 290 78Q290 50 306 38T341 26Q378 26 414 59T463 140Q466 150 469 151T485 153H489Q504 153 504 145Q504 144 502 134Q486 77 440 33T333 -11Q263 -11 227 52Q186 -10 133 -10H127Q78 -10 57 16T35 71Q35 103 54 123T99 143Q142 143 142 101Q142 81 130 66T107 46T94 41L91 40Q91 39 97 36T113 29T132 26Q168 26 194 71Q203 87 217 139T245 247T261 313Q266 340 266 352Q266 380 251 392T217 404Q177 404 142 372T93 290Q91 281 88 280T72 278H58Q52 284 52 289" />
</svg>

似乎不起作用。为什么会这样？脚本、transform 属性或其他问题是否有问题？如果是，那么如何修复它？如果不是，那么如何将 x 符号设置为动画以变成 = 符号？或者至少，从 SVG 动画 MathJax 的替代解决方案？谢谢！