SVG_6_矢量图_transform_animateTransform_豚_鼠？

​PS：补一下SVG_6，本来6是另一个功能介绍，素材没整理好，算是错过，后面再介绍。

 

知识点：

一，transform，这不是控件，只是一个属性，但功能强大，支持位移、缩放、旋转。

二，animateTransform标签，这是一个控件。

使用时，最好用<g>标签单独控制想要是用动画的控件，否则会使整个画布都动画起来。

一般用法：

旋转属性就像：rotation(theta, x, y)，theta是一个角度，x和y是绝对坐标。

<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="60 100 400" to="360 100 60" repeatCount="indefinite" />

上干货

 

在一个标签中，比如在circle中，transform有多种玩法,不管是位移还是缩放，都是针对左上角的0,0坐标而言的。

• 位移：transform="translate(200,20)"  在translate写位移的坐标即可。

• 缩放：transform="scale(0.5)" 在scale写缩放倍数即可。

• 旋转：transform="rotate(359)"

 

如果既要缩放，还要旋转，可以这么写：

transform="rotate(359)scale(0.5)"；

如果想基于原图形旋转，记得添加这两个属性：

style="transform-origin:center;transform-box:fill-box"

否则，旋转是以左上角的0,0做旋转的。

 

先看效果图：

PS：文字是动态转圈的，想看效果可以去公众号：Xi说SVG

 

由于需要放到公众号中展示，所以微调了viewBox。

 

上代码

 

<!--Scalable Vector Graphic--><svg xmlns="http://www.w3.org/2000/svg"      width="500px"      height="500px"      viewBox="0 0 1000 1000">  <!--  在一个标签中，比如在circle中，transform有多种玩法,不管是位移还是缩放，都是针对左上角的0,0坐标而言的。  位移：transform="translate(200,20)"  在translate写位移的坐标即可。  缩放：transform="scale(0.5)" 在scale写缩放倍数即可。  旋转：transform="rotate(359)"  如果既要缩放，还要旋转，可以这么写：transform="rotate(359)scale(0.5)"；    如果想基于原图形旋转，记得添加这两个属性，style="transform-origin:center;transform-box:fill-box"  否则，旋转是以左上角的0,0做旋转的。-->  <g stroke="black" stroke-width="10" fill="none"> <!--    本圆-->    <circle cx="480" cy="280" r="250"></circle><!--    位移后的圆-->    <circle cx="500" cy="120" r="125"        transform="translate(200,20)" stroke="red"></circle><!--    缩放后的圆，默认以左上角0,0坐标-->    <circle cx="480" cy="280" r="250"        transform="scale(0.5)" stroke="blue"></circle><!--    缩放后的圆，以图形中心缩放      想要图像中心缩放，需要加一个style，如下：style="transform-origin:center;transform-box:fill-box"-->    <circle cx="480" cy="280" r="250"        style="transform-origin:center;transform-box:fill-box"        transform="scale(0.5)" stroke="greenyellow"></circle>        <!--    鼻子--><!--    左鼻子-->    <g >    <ellipse cx="400" cy="280" rx="30" ry="60" transform="rotate(359)"></ellipse>    <ellipse cx="400" cy="280" rx="5" ry="10"></ellipse>    </g><!--    右鼻子-->    <g >    <ellipse cx="560" cy="280" rx="30" ry="60" transform="rotate(359)"></ellipse>    <ellipse cx="560" cy="280" rx="5" ry="10"></ellipse>    </g><!--    尾巴-->    <g stroke="black" stroke-width="10"><!--      尾巴根-->      <path d="M700 400A170 170 0 0 0 820 302"></path><!--      尾巴绕圈-->      <circle r="30" cx="800" cy="280"></circle><!--      尾巴尾-->      <path d="M820 302A170 170 0 0 0 900 200" stroke-width="6"></path>    </g>  </g>    <!--    翔-->    <image width="300" height="300" transform="translate(0,600)" stroke="black" href="https://mmbiz.qpic.cn/mmbiz_png/kLwGw8KricxMwnugI0S5b0jSYH58sibLPO6RNJuP8fGSBwibbag1VTiast6j8fiaHnHbVhDrsmIvPPVS4vkFnJiciaNhg/0?wx_fmt=png"></image>  <g><!--    苍蝇-->    <image width="50" height="50" transform="translate(0,700)rotation" stroke="black" href="https://mmbiz.qpic.cn/mmbiz_png/kLwGw8KricxMwnugI0S5b0jSYH58sibLPOxPjibm2wKC60eFZKzibuacJmyIEMTWnPOJBJh9amrSfVehjibyZaXzRWQ/0?wx_fmt=png"></image>    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="60 100 400" to="360 100 60" repeatCount="indefinite" />  </g></svg>​

 

Xi说孔方兄官方认证

Xi说孔方兄出品