> All interactivity must be pure SVG + inline CSS. WeChat bans JavaScript entirely.
begin="mousedown", begin="click", begin="touchstart", , style="" only (no blocks, no external sheets) to embed HTML inside SVG + (leaf attr is WeChat-specific) at end to enable WeChat special rendering| Pattern | Use Case | Complexity |
|---|---|---|
| --------- | ---------- | ------------ |
| A. HTML + SVG accents | Visual enhancement, animated decorations | ★☆☆ |
| B. Pure SVG state machine | Click games, step-by-step reveals | ★★☆ |
| C. SVG + HTML hybrid | Interactive header + long-form body | ★★☆ |
| D. CSS Grid + multi-SVG | Interactive courseware, multi-card reveals | ★★★ |
For detailed architecture patterns, examples, and animation templates, read references/patterns.md.
Single-layer cover that disappears on click:
<g>
<!-- 1. Fade out on click -->
<animate attributeName="opacity" values="1;0"
dur="0.01s" fill="freeze"
begin="mousedown" restart="never"/>
<!-- 2. Move off-screen after delay -->
<animatetransform attributeName="transform" type="translate"
values="0 0;2000 0" dur="0.01s" fill="freeze"
begin="click+0.02s" restart="never"/>
<!-- Background + content -->
<rect width="750" height="2400" fill="#0d1117"/>
<text x="375" y="500" fill="#c9d1d9" font-size="24" text-anchor="middle">
<tspan leaf="">👆 Click to reveal</tspan>
</text>
</g>
| Param | Fast (game) | Slow (ceremony) |
|---|---|---|
| ------- | ------------- | ----------------- |
| click delay | click+0.02s | click+0.3s |
Stack layers bottom-to-top in SVG (later elements render on top). Each layer has its own mousedown/click triggers with restart="never":
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 600"
style="display:block;width:100%;">
<!-- Bottom: final reveal -->
<rect width="750" height="600" fill="#0d1117"/>
<text x="375" y="300" fill="#7ee787" font-size="36" text-anchor="middle">
<tspan leaf="">🎉 Unlocked!</tspan>
</text>
<!-- Layer 2 -->
<g>
<animate attributeName="opacity" values="1;0"
dur="0.01s" fill="freeze" begin="mousedown" restart="never"/>
<animatetransform attributeName="transform" type="translate"
values="0 0;2000 0" dur="0.01s" fill="freeze"
begin="click+0.05s" restart="never"/>
<rect width="750" height="600" fill="#161b22"/>
<text x="375" y="300" fill="#FF8B2C" font-size="28" text-anchor="middle">
<tspan leaf="">Level 2 → Tap again</tspan>
</text>
</g>
<!-- Layer 1 (top, visible first) -->
<g>
<animate attributeName="opacity" values="1;0"
dur="0.01s" fill="freeze" begin="mousedown" restart="never"/>
<animatetransform attributeName="transform" type="translate"
values="0 0;2000 0" dur="0.01s" fill="freeze"
begin="click+0.05s" restart="never"/>
<rect width="750" height="600" fill="#21262d"/>
<text x="375" y="280" fill="#c9d1d9" font-size="28" text-anchor="middle">
<tspan leaf="">👆 Tap to start</tspan>
</text>
</g>
</svg>
<p style="display:none;"><mp-style-type data-value="10000"/></p>
Add tactile bounce on every tap (restart="always"):
<g>
<animatetransform attributeName="transform" type="translate"
values="0 0;0 22;0 0" dur="0.5s"
begin="mousedown" restart="always"/>
<rect width="750" height="1000" fill="#161b22" opacity="0.01"/>
</g>
| Role | Hex |
|---|---|
| ------ | ----- |
| Background | #0d1117 |
| Panel | #161b22 |
| Border | #30363d |
| Red | #ff5f56 |
| Yellow | #ffbd2e |
| Green | #27c93f |
| Body text | #c9d1d9 |
| Comment | #6e7681 |
| Highlight | #FF8B2C |
| Success | #7ee787 |
references/patterns.md for the chosen pattern's detailed templaterestart="never" vs restart="always" logic at the end, no blocks, no external CSS, all styles inline共 1 个版本