WeChat Official Account SVG/CSS Interactive Effects

All interactivity must be pure SVG + inline CSS. WeChat bans JavaScript entirely.

Core Constraints

• SVG events: begin="mousedown", begin="click", begin="touchstart"
• SVG animation: <animate>, <animatetransform>, <animateMotion>
• CSS: inline style="" only (no <style> blocks, no external sheets)
• <foreignObject> to embed HTML inside SVG
• Text in SVG: <text> + <tspan leaf=""> (leaf attr is WeChat-specific)
• Append <p style="display:none;"><mp-style-type data-value="10000"/></p> at end to enable WeChat special rendering
• viewBox width: 750 (mobile-optimized)

Four Architecture Patterns