robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG - Overview</title>
  <link rel="stylesheet" href="../demo.css">
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .tile {
      background: rgba(255,255,255,0.02);
      border: 1px solid #242424;
      border-radius: 12px;
      padding: 14px;
      min-height: 120px;
      overflow: hidden;
      position: relative;
    }
    .tile h3 {
      margin: 0 0 8px;
      font-size: 13px;
      color: #fff;
      font-weight: 800;
    }
    .tile p {
      margin: 0;
      font-size: 12px;
      color: #a8a8a8;
      line-height: 1.6;
    }
    .badge {
      position: absolute;
      right: 12px;
      top: 12px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.8px;
      color: #6f6f6f;
      text-transform: uppercase;
      background: rgba(255,255,255,0.02);
      border: 1px solid #2a2a2a;
      padding: 4px 8px;
      border-radius: 999px;
    }
    .tile svg { width: 100%; height: 64px; margin-top: 10px; }
    .stroke { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .stroke.orange { stroke: #ff9f43; opacity: 0.9; }
    .stroke.red { stroke: #ff4b4b; opacity: 0.9; }
    .dot { fill: #ff9f43; opacity: 0.95; }
  </style>
</head>
<body>
  <div class="container">
    <div class="page-top">
      <div class="crumb">ANIMATION › SVG</div>
      <div class="since">SINCE 1.0.0</div>
    </div>

    <h1>SVG</h1>
    <p class="description">
      SVG 动画最容易“看起来像魔法”。这组示例会用 <code class="inline">xjs</code> 展示几种常见玩法：<br>
      <strong>路径描边</strong>、<strong>沿路径运动</strong>、<strong>属性动画</strong>、以及 <strong>transform 动画</strong>。
    </p>

    <h2>你会看到什么？</h2>
    <div class="grid">
      <div class="tile">
        <div class="badge">draw</div>
        <h3>路径描边（draw）</h3>
        <p>把路径变成“正在被画出来”的效果。适合 logo / loading / 强调线条。</p>
        <svg viewBox="0 0 120 60" aria-hidden="true">
          <path class="stroke" d="M10,42 C25,10 48,10 60,30 C72,50 92,50 110,18" />
          <path class="stroke orange" d="M10,42 C25,10 48,10 60,30 C72,50 92,50 110,18" />
        </svg>
      </div>
      <div class="tile">
        <div class="badge">motion</div>
        <h3>沿路径运动（Motion Path）</h3>
        <p>一个点沿着 path 跑，像小飞机/小精灵巡航。用 update 回调把进度映射到路径长度。</p>
        <svg viewBox="0 0 120 60" aria-hidden="true">
          <path class="stroke" d="M8,44 C26,8 56,6 74,30 C90,52 102,50 112,16" />
          <circle class="dot" cx="24" cy="32" r="4" />
        </svg>
      </div>
      <div class="tile">
        <div class="badge">attr</div>
        <h3>SVG 属性动画（cx / r / …）</h3>
        <p>不是所有 SVG 属性都走 WAAPI；有些会走 JS fallback，但写法一样简洁。</p>
        <svg viewBox="0 0 120 60" aria-hidden="true">
          <circle class="stroke red" cx="38" cy="30" r="10" />
          <circle class="stroke orange" cx="78" cy="30" r="16" />
        </svg>
      </div>
    </div>

    <div class="box-container" style="margin-top: 18px;">
      <div class="box-header">
        <div class="box-title">一句话总结</div>
      </div>
      <div class="feature-desc">
        <strong>核心心法：</strong>
        <br>- SVG 动画的“视觉冲击力”来自<strong>路径</strong>与<strong>形状变化</strong>。
        <br>- 你可以把“进度（0..1）”当作万能遥控器：它能驱动位置、旋转、描边、透明度……几乎一切。
      </div>
      <div class="action-bar">
        <button class="play-btn" onclick="goNext()">开始看第一个示例 →</button>
      </div>
    </div>

    <div class="doc-nav" aria-label="Previous and next navigation">
      <a href="#" onclick="goPrev(); return false;">
        <span>
          <span class="nav-label">Previous</span><br>
          <span id="prev-title" class="nav-title">—</span>
        </span>
        <span aria-hidden="true">←</span>
      </a>
      <div id="nav-center" class="nav-center">SVG</div>
      <a href="#" onclick="goNext(); return false;">
        <span>
          <span class="nav-label">Next</span><br>
          <span id="next-title" class="nav-title">—</span>
        </span>
        <span aria-hidden="true">→</span>
      </a>
    </div>
  </div>

  <div id="toast" class="toast" role="status" aria-live="polite"></div>

  <script src="../page_utils.js"></script>
  <script>
    const CURRENT = 'svg/overview.html';
    function goPrev() { window.parent?.docNavigatePrev?.(CURRENT); }
    function goNext() { window.parent?.docNavigateNext?.(CURRENT); }
    DocPage.syncMiddleActive(CURRENT);
    DocPage.syncPrevNext(CURRENT);
  </script>
</body>
</html>