Claude の Slides で、埋め込みの SVG アニメーションがプレゼンテーションモードで止まる

Claude の Slides アーティファクトで LT 資料を作った。 1枚目に開始待ちの画面を置き、幾何学模様がうねうね動くようにした。 編集画面では動くのに、プレゼンテーションモードにすると止まった。 波線も図形も、最初の位置のまま一枚絵になる。

切り分け

デッキには、動かし方の違う埋め込み（<x-embed>）が3つあった。 プレゼンテーションモードで、どれが動くかを見た。

表1: 埋め込みの動かし方とプレゼンテーションモードでの結果

スライド	動かし方	プレゼンテーションモードで動いたか
待機画面の波線と図形	SVG の <animate>（d 属性で線の形を変える）と <animateTransform>	止まった
矢印の上を流れる点	SVG の <animateMotion>	確認していない
歯車と棒グラフ	CSS の @keyframes	動いた

CSS は動くので、止まっているのは SVG のアニメーション（SMIL）のほうだと見当を付けた。

直し方

線の形そのものを変えるのはやめた。 画面より長い波を1本描いておき、CSS で横に流しながら上下に伸び縮みさせる。 これでプレゼンテーションモードでも動いた。

<style>
g, path, polygon { transform-box: view-box }
path { vector-effect: non-scaling-stroke }
.w { animation: w linear infinite }
@keyframes w { to { transform: translateX(-960px) } }
.b { animation: b ease-in-out infinite alternate }
@keyframes b { from { transform: scaleY(1) } to { transform: scaleY(.35) } }
</style>
<svg width="1920" height="1080" viewBox="0 0 1920 1080">
  <g class="b" style="transform-origin: 0 540px; animation-duration: 4s">
    <path class="w" style="animation-duration: 12s" d="M-960 540C-800 700,-640 700,-480 540C-320 380,..." fill="none" stroke="#F29A38"/>
  </g>
</svg>

波の1周期を 960px にして、translateX(-960px) で1周期ずらすと継ぎ目なく繰り返せる。 図形の回転と移動も、<animateTransform> から CSS の rotate と translate に置き換えた。

置き換えるときの注意

• SVG の要素に CSS の transform をかけるときは、transform-box: view-box を付けて、transform-origin を SVG の座標で指定する。回転なら図形の中心、伸び縮みならその線の高さ（例では 0 540px）にする。
• scaleY で縮めると線も細くなる。vector-effect: non-scaling-stroke を付けると太さが変わらない。
• 形が崩れるような揺れ方は再現できない。流れる波が伸び縮みする見え方に変わる。

未確認のこと

• プレゼンテーションモードで SVG のアニメーションが止まる理由は、公開されている資料に書かれていない。Slides の仕様書には、埋め込みの中は HTML・CSS・JS がそのまま動くとだけある。上の切り分けからの推定である。
• <animateMotion> の点がプレゼンテーションモードで動くかは見ていない。