svg基础+微信公众号交互(一)

svg基础+公众号交互

欢迎点击: 个人官网博客.

前言： svg是矢量图，像我们平时用到的png、jpg等都是位量图即为一个一个像素点堆起来的 。

需要注意一点，svg 中子标签是不能带单位的，其写法像canvas。

svg的优势：

• SVG 可被非常多的工具读取和修改(比如记事本)；
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强；
• SVG 图像可在任何的分辨率下被高质量地打印；
• SVG 可在图像质量不下降的情况下被放大，也就是不会失真；
• SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)；
• SVG 文件是纯粹的 XML；

svg常用标签

  <svg  style="height: 100%; width:100%; " version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
        <!-- viewBox="x, y, width, height"   x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度 -->
        <!-- viewbox指的是，svg 标签在 viewport 中的实际占位 -->
        <a xlink:href="https://www.baidu.com/">
            <text x="10" y="20">链接跳转</text>
        </a>
        <circle cx="100" cy="100" r="40" fill="red" stroke="black" stroke-width="5"></circle>
        <rect width="200" height="200" x="100" y="100" fill="red" rx="30" ry="30"></rect>
        <line x1="50" y1="300" x1="50" y1="600" stroke-width="5" stroke-opacity="0.5" stroke="black"></line>
        <polyline points="50 50 200 300 230 300 250 200" stroke-width="5" stroke="black" fill="none"></polyline>
        <!-- polyline类似于line，polyline是折线，更平滑，无缝隙 -->
        <text x="100" y="108" font-size="16" text-anchor="middle">我是文本</text>
        <g transform="translate(500,500)">
            <!-- g 标签就是group 组的意思，分组是为了更好的操控一块一块的内容，如动画，位移。 -->
            <image height="80" width="80" xlink:href="/image/0.jpg"></image>
            <text x="40" y="48" font-size="16" fill="red" stroke="red;" text-anchor="middle">我是文本</text>
        </g>
        <g transform="translate(200,200)" stroke="black" stroke-width="5" fill="yellow">
            <!-- 像一些共有的属性可以直接写在g标签里面，可以不重复写 -->
            <circle r="40"></circle>
            <circle r="30"></circle>
            <circle r="20"></circle>
            <circle r="10"></circle>
        </g>
        <path
           d="M37.1,124.13v3.45a20.83,20.83,0,0,1-3.36,12.28,21.27,21.27,0,0,0-3.54,11.86,3.45,3.45,0,0,0,3.45,3.45h0a3.45,3.45,0,0,0,3.45-3.45h0c0-3.88,1.1-5.78,2.62-8.41A27.61,27.61,0,0,0,44,127.58v-3.45H37.1Z"
       transform="translate(-16.4 0)" fill="#c83741"></path>
       <!-- <path>内的属性什么意思，待会重点讲 -->
    </svg>

svg动画

 <g>
 <animate attributeName="x" begin="click" dur="3000ms" from="0" to="100%" fill="freeze">
 </animate>
 <animate attributeName="opacity" begin="0.5s" dur="0.1s" values="0;1" fill="freeze"
  restart="never"></animate>
  <text x="200" y="540" fill="#fff" style="font-size: 30px">文字</text>
  </g>
   <animateTransform attributeName="transform" type="translate" values="0 0;0 -350" repeatCount="1"
    fill="freeze" begin="click" dur="0.5s" restart="whenNotActive"></animateTransform>
   

attributeName为要改变的属性名,
begin为开始的时间，begin="click"表示点击开始
dur是动画持续多少秒,
过渡的过程有from-to和values两种写法，values="0;1"表示透明度从0到1,
fill="freeze"表示动画过渡后维持在结束的状态,
restart="never"表示在整个SVG执行的过程中，元素动画不能被重置,简而言之只执行一次,

重点：animate只对当前所在g标签内的标签起作用也就是 ，不会影响其他地方，这就是为什么要分组

demo1

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
        <rect x="0" y="0" width="300" height="100" stroke="red" fill="red" stroke-width="1" />
        <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
            <animate attributeName="cx" from="0" to="100" dur="5s" repeatCount="indefinite" />
        </circle>
    </svg>

demo2

 <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
        <rect x="0" y="0" width="200" height="200" fill="red" stroke="red" stroke-width="1" />
        <rect x="20" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">
            <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="20 60 60" to="360 100 60" repeatCount="indefinite" />
        </rect>
    </svg>

demo3

     <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
        <path fill="none" stroke="lightgrey"
          d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
      
        <circle r="5" fill="red">
          <animateMotion dur="10s" repeatCount="indefinite"
            path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
        </circle>
      </svg>

这里是引用 animateMotion 元素定义了一个元素如何突破运动路径进行移动。

案例一

   <svg style="display: block; background-image: url(&quot;https://135editor.cdn.bcebos.com/files/images/editor_styles/d7d1434fee6ace6e80762f6eb8385b36.jpg&quot;); background-repeat: no-repeat; background-size: 100%;"
        width="100%" viewBox="0 0 1280 2275" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="0" y="0" width="100%" height="100%" style="fill: #f1f7ff;">
            <animate attributeName="x" begin="click" dur="3000ms" from="0" to="100%" fill="freeze"></animate>
        </rect>
    </svg>

点击效果

案例二

   <section
        style="box-sizing:border-box;width: 100%; vertical-align: top; overflow-y: auto; background-image: url(&quot;https://135editor.cdn.bcebos.com/files/images/editor_styles/460179cdc7ef0f15b846ed03cc385c27.jpg&quot;); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: scroll;">
        <section style="box-sizing:border-box;width: 100%;vertical-align: top; overflow-y: scroll;overflow-x: hidden;"
            data-role="animate">
            <section style="box-sizing:border-box;width: 100%;">
                <img style="box-sizing:border-box;width: 100%; display: block;"
                    src="https://135editor.cdn.bcebos.com/files/images/editor_styles/c470dddd1b72798fec2ae2ac4696ede3.jpg"
                    data-ratio="0.7413793103448276" data-w="1080" class="" data-op="change" />
            </section>
            <section style="height: 0;" data-role="list">
                <section>
                    <img style="box-sizing:border-box;width: 100%; display: block;"
                        src="https://135editor.cdn.bcebos.com/files/images/editor_styles/b9484a847fcb00f405da89434873ba7c.jpg"
                        data-ratio="0.7407407407407407" data-w="1080" class="" />
                </section>
            </section>
        </section>
    </section>

滑动效果

后续更精彩!!!