robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG - List</title>
  <link rel="stylesheet" href="../list.css">
  <style>
    .card { min-height: 132px; padding: 18px 18px 16px 18px; }
    .card-preview {
      height: 78px;
      border-radius: 10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
    }

    .mini {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
    }

    .mini svg {
      width: 120px;
      height: 60px;
      overflow: visible;
    }

    .stroke {
      fill: none;
      stroke: rgba(255,255,255,0.25);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .stroke.orange { stroke: #ff9f43; opacity: 0.9; }
    .stroke.red { stroke: #ff4b4b; opacity: 0.9; }

    .mini-dot {
      fill: #ff9f43;
      opacity: 0.9;
    }

    .mini-text {
      fill: rgba(255,255,255,0.22);
      font-weight: 800;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 14px;
      letter-spacing: 1px;
    }

    /* Hover: subtle “alive” motion */
    .card:hover .stroke.orange { stroke-dasharray: 6 6; animation: dash 0.8s linear infinite; }
    .card:hover .mini-dot { animation: bob 0.8s ease-in-out infinite alternate; }
    @keyframes dash { to { stroke-dashoffset: -12; } }
    @keyframes bob { to { transform: translateY(-3px); } }
  </style>
</head>
<body>
  <div class="search-header">
    <div class="search-title">SVG</div>
    <div class="search-input-container">
      <div class="search-icon"></div>
      <input type="text" class="search-input" placeholder="Filter SVG demos...">
    </div>
  </div>

  <div class="grid-section">
    <div class="header-card active" onclick="selectItem('overview.html', this)">
      <div class="header-dots"></div>
      <div class="header-title">SVG</div>
    </div>

    <div class="card-grid" style="margin-top: 40px;">
      <div class="card" data-content="svg/test_draw_path.html" onclick="selectItem('test_draw_path.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
              <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>
        <div class="card-footer">draw() 路径描边</div>
      </div>

      <div class="card" data-content="svg/test_motion_path.html" onclick="selectItem('test_motion_path.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
              <path class="stroke" d="M8,44 C26,8 56,6 74,30 C90,52 102,50 112,16" />
              <circle class="mini-dot" cx="20" cy="32" r="4" />
            </svg>
          </div>
        </div>
        <div class="card-footer">沿路径运动（Motion Path）</div>
      </div>

      <div class="card" data-content="svg/test_svg_attributes.html" onclick="selectItem('test_svg_attributes.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
              <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="card-footer">SVG 属性动画（cx / r / …）</div>
      </div>

      <div class="card" data-content="svg/test_mask_reveal.html" onclick="selectItem('test_mask_reveal.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
               <rect width="100%" height="100%" fill="#333" />
               <circle cx="60" cy="30" r="15" fill="#000" />
            </svg>
          </div>
        </div>
        <div class="card-footer">SVG Mask 遮罩动画</div>
      </div>

      <div class="card" data-content="svg/test_svg_transforms.html" onclick="selectItem('test_svg_transforms.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
              <rect class="stroke orange" x="18" y="18" width="18" height="18" rx="4" />
              <rect class="stroke" x="52" y="18" width="18" height="18" rx="4" />
              <rect class="stroke red" x="86" y="18" width="18" height="18" rx="4" />
              <text class="mini-text" x="60" y="54" text-anchor="middle">TRANSFORM</text>
            </svg>
          </div>
        </div>
        <div class="card-footer">SVG transform（x/y/rotate/scale）</div>
      </div>

      <div class="card" data-content="svg/test_morph_points.html" onclick="selectItem('test_morph_points.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
              <polygon class="stroke orange" fill="rgba(255,159,67,0.10)"
                points="60,10 72,26 92,28 77,40 82,54 60,46 38,54 43,40 28,28 48,26"></polygon>
            </svg>
          </div>
        </div>
        <div class="card-footer">变形（points 多边形）</div>
      </div>

      <div class="card" data-content="svg/test_morph_path.html" onclick="selectItem('test_morph_path.html', this)">
        <div class="card-preview">
          <div class="mini" aria-hidden="true">
            <svg viewBox="0 0 120 60">
              <path class="stroke orange" fill="rgba(255,159,67,0.10)"
                d="M60 8 C84 8 100 22 100 34 C100 46 84 54 60 54 C36 54 20 46 20 34 C20 22 36 8 60 8 Z"></path>
            </svg>
          </div>
        </div>
        <div class="card-footer">变形（path d）</div>
      </div>
    </div>
  </div>

  <script>
    function selectItem(url, el) {
      document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
      document.querySelectorAll('.header-card').forEach(c => c.classList.remove('active'));
      el.classList.add('active');
      window.parent?.loadContent?.('svg/' + url);
    }

    function setActiveByContentUrl(contentUrl) {
      const normalized = String(contentUrl || '').replace(/^\.\//, '');
      const header = document.querySelector('.header-card');
      const cards = Array.from(document.querySelectorAll('.card[data-content]'));

      document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
      document.querySelectorAll('.header-card').forEach(c => c.classList.remove('active'));
      if (!normalized) return;

      if (normalized.includes('svg/overview.html')) {
        header?.classList.add('active');
        return;
      }
      const match = cards.find(c => normalized.endsWith(c.dataset.content) || normalized.includes(c.dataset.content));
      if (match) match.classList.add('active');
    }

    window.setActiveByContentUrl = setActiveByContentUrl;
  </script>
</body>
</html>