svg-for-wechat-articles
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在微信公众号文章里使用 svg 动画与交互</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <div class="page-header">
            <h2>在微信公众号文章里使用 svg 动画与交互</h1>
        </div>
    </div>
    <div class="container">
        <h4>案例</h1>
            <ul>
                <li>
                    <a href="pages/click-to-start-and-click-to-stop.html" target="_blank">点击开始, 点击结束</a>
                </li>
            </ul>
        </h4>
    </div>


    <div class="container">
        <h4>基本图形与动画与交互</h1>
            <ul>
                <li>
                    <a href="pages/line.html" target="_blank">直线 line</a>
                </li>
                <li>
                    <a href="pages/rect.html" target="_blank">矩形 rect</a>
                </li>
                <li>
                    <a href="pages/circle.html" target="_blank">圆 circle</a>
                </li>
                <li>
                    <a href="pages/ellipse.html" target="_blank">椭圆 ellipse</a>
                </li>
                <li>
                    <a href="pages/polyline.html" target="_blank">折线 polyline</a>
                </li>
                <li>
                    <a href="pages/polygon.html" target="_blank">多边形 polygon</a>
                </li>
                <li>
                    <a href="pages/path.html" target="_blank">路径 path</a>
                </li>
                <li>
                    <a href="pages/linear-gradient.html" target="_blank">线性渐变 linear gradient</a>
                </li>
                <li>
                    <a href="pages/radial-gradient.html" target="_blank">径向渐变 radial gradient</a>
                </li>
                <li>
                    <a href="pages/pattern.html" target="_blank">纹理 pattern</a>
                </li>
                <li>
                    <a href="pages/text.html" target="_blank">文本 text</a>
                </li>
                <li>
                    <a href="pages/transform.html" target="_blank">变形 transform</a>
                </li>
                <li>
                    <a href="pages/mask.html" target="_blank">遮罩 mask</a>
                </li>
                <li>
                    <a href="pages/image.html" target="_blank">图片 image</a>
                </li>
                <li>
                    <a href="pages/use.html" target="_blank">元素复用 use</a>
                </li>
                <li>
                    <a href="pages/viewbox.html" target="_blank">视图盒子 viewbox</a>
                </li>
                <li>
                    <a href="pages/responsive.html" target="_blank">响应式 responsive</a>
                </li>
                <li>
                    <a href="pages/basic-animations.html" target="_blank">基本动画示例</a>
                </li>
                <li>
                    <a target="_blank" href="https://mp.weixin.qq.com/s?__biz=MzA4NzA0ODUzOA==&mid=2651270736&idx=1&sn=96767949ec16f1c1da93fa9f9ad0bee4&chksm=8bcce665bcbb6f73f2354606a77a932b551db38f33cd8992dc952cf08687ae623f0d516239f3&mpshare=1&scene=23&srcid=0706tQHGZ3YaNDLtmasgBpnk#rd">你初中班主任让我把这套题发给你</a>
                    &nbsp;
                    <!-- <a href="pages/animation-2.html" target="_blank">轮播效果</a> -->
                </li>
                <li>
                    <a target="_blank" href="https://mp.weixin.qq.com/s?__biz=MTQzOTM1MDc4MQ==&mid=2700995265&idx=1&sn=34eba047a6d58f6e7b5561c6a5f599e4&chksm=58fc02536f8b8b45b5ad5d3d0c69881ec72bf7178421b7ff81c0a1c5d41cb516a34daef9a429&mpshare=1&scene=23&srcid=07060i1PK4jcl1Viwf3CjNwp#rd">最新魔性小游戏诞生了！跳一跳，头脑王者都过时了～</a>
                </li>
                <li>
                    <a target="_blank" href="https://mp.weixin.qq.com/s?__biz=MzI0Njc4MjM0Nw==&mid=2247486169&idx=1&sn=2dba43c21b00cf714f70ea3fcebc634a&chksm=e9bb4a3ddeccc32bce84cdbe4a55d864cc5ab3c6313d52b552d2e59b1b3bec040ff5a89ce855&mpshare=1&scene=23&srcid=0706Ufxzmj7PtS1wznaMUBqh#rd">这是一条很大很大的推送</a>
                    &nbsp;
                    <!-- <a href="pages/animation-1.html" target="_blank">横向滚动, 点击显示</a> -->
                </li>
                <li>
                    <a href="pages/interactions.html" target="_blank">基本交互示例 </a>
                </li>
                <li>
                    <a href="pages/carousel.html" target="_blank">轮播图效果</a>
                </li>
                <li>
                    <a href="pages/longtime-translating.html" target="_blank">长距离位移, 非路径, 中途有停顿</a>
                </li>
                <li>
                    <a href="pages/click-to-show-items-step-by-step.html" target="_blank">横向滚动 + 点击显示元素</a>
                </li>
                <li>
                    <a href="pages/long-cable-lamp.html" target="_blank">灯 long cable lamp</a>
                </li>
                <li>
                    <a href="pages/iconic-lightbulb.html" target="_blank">灯泡 iconic lightbulb</a>
                </li>
                <li>
                    <a href="pages/iconic-lightbulb-no-css.html" target="_blank">灯泡(无 css 版) iconic lightbulb no css</a>
                </li>
                <li>
                    <a href="https://danielcwilson.com/talks/2016/motionpath/" target="_blank">motionpath</a>
                </li>
                <li>
                    <a href="http://sparkbox.github.io/bouncy-ball/#smil" target="_blank">前端实现动画的方式</a>
                </li>
                <li>
                    <a href="https://codepen.io/jaminroe/pen/eNxPvz?editors=1010" target="_blank">沿路径移动元素</a>
                </li>
                <li>
                    <a href="https://css-tricks.com/almanac/properties/s/stroke-dasharray/" target="_blank">stroke-dasharray 详解</a>
                </li>
            </ul>
    </div>

    <div class="container">
        <h4>微信公众号文编辑器</h4>
        <ul>
            <li>
                <a href="http://www.135editor.com" target="_blank">135editor.com</a>
            </li>
            <li>
                <a href="http://bj.96weixin.com" target="_blank">96weixin.com</a>
            </li>
            <li>
                <a href="http://www.xmyeditor.com" target="_blank">xmyeditor.com</a>
            </li>
            <li>
                <a href="https://edit.newrank.cn" target="_blank">newrank.cn</a>
            </li>
            <li>
                <a href="http://www.365editor.com" target="_blank">365editor.com</a>
            </li>
            <li>
                <a href="http://ipaiban.com/bianji.jsp" target="_blank">ipaiban.com</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <h4>其它</h1>
            <ul>
                <li>
                    <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial" target="_blank">mdn 教程</a>
                </li>
                <li>
                    <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG" target="_blank">mdn 文档</a>
                </li>
                <li>
                    <a href="https://www.w3.org/TR/SVG/" target="_blank">w3c 文档</a>
                </li>
                <li>
                    <a href="http://slides.com/sarasoueidan/styling-animating-svgs-with-css--2#/35" target="_blank">页面添加 svg 的方式</a>
                </li>
                <li>
                    <a href="https://github.com/codrops/HoverEffectIdeas" target="_blank">用 svg 给元素加 hover 效果</a>
                </li>
                <li>
                    <a href="https://www.w3.org/TR/SVG/" target="_blank">w3c 文档</a>
                </li>
                <li>
                    <a href="https://svgontheweb.com/" target="_blank">web svg 指南 svgontheweb</a>
                </li>
                <li>
                    <a href="https://css-tricks.com/guide-svg-animations-smil/" target="_blank">svg 动画指南</a>
                </li>

                <li>
                    <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Animation%20event%20attributes" target="_blank">svg 元素上的事件属性</a>
                </li>
                <li>
                    <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element" target="_blank">svg 元素参考</a>
                </li>

                <li>
                    <a href="https://www.smashingmagazine.com/2018/05/svg-interaction-pointer-events-property/" target="_blank">鼠标可点击区域 pointer events</a>
                </li>
                <li>
                    <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">svg 元素的属性参考</a>
                </li>
                <li>
                    <a href="http://cubic-bezier.com/" target="_blank">贝赛尔曲线</a>
                </li>
                <li>
                    <a href="https://easings.net/zh-cn" target="_blank">缓动函数的贝赛尔曲线</a>
                </li>
                <li>
                    <a href="https://www.webdesignerdepot.com/2015/01/the-ultimate-guide-to-svg/" target="_blank">svg 参考大全</a>
                </li>
                <li>
                    <a href="https://docs.google.com/drawings" target="_blank">google draw</a>
                </li>

                <li>
                    <a href="http://snapsvg.io/" target="_blank">http://snapsvg.io/</a>
                </li>
                <li>
                    <a href="https://docs.google.com/drawings" target="_blank">http://svgjs.com/</a>
                </li>
            </ul>
    </div>

</body>

</html>