博客

垃圾广电总局吃屎

http://www.dilidili.com/watch/11071/

进击的巨人

http://www.dilidili.com/anime/kyojin/

svg是不能直接转换成png，需要先转化成canvas在另存为png。

这里需要用到谷歌的canvg。

http://pan.baidu.com/s/1jGvhQ4m

以前常见的三角符号我们都需要图片来带图，其实简单利用css的border属性和border属性中的transparent值就能完成。

以下方式可以兼容IE7+

例如：

1，

<div id="sj"></div>
#sj{ border:15px solid red; height:100px; width:100px;}

 

 

2，

#sj{ border:15px solid red; height:100px; width:100px; border-left:15px solid transparent;border-right:15px solid transparent}

 

 

3，

#sj{ border:15px solid red; height:0px; width:0px; border-left:15px solid transparent;border-right:15px solid transparent}

在将高度和宽度设置为0px就完成简单三角符号

 

4，

#sj{ border:15px solid red; height:0px; width:0px; border-left:15px solid transparent;border-right:15px solid transparent; border-top:0;}

在选择使用的方向三角符号

 

 

 

 

 

 

 

<svg> //相当于一个让舞台是svg能展示效果的区域
viewBox=”280,80,20,20″ //起点x轴为280，y轴80，宽20，高20的区域在svg中截图并且铺满svg

<svg width=”400″ height=”300″ viewBox=”0,0,40,30″ style=”border:1px solid #cd0000;”></svg>
viewport与preserveaspectratio
http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
http://www.drawsvg.org/ svg在线绘图
http://editor.method.ac/

 

svg css属性
fill: orange //填充颜色
stroke: black //边框颜色
stroke-width: 3 //边框大小
stroke-dasharray: 10, 5 //虚线间隔
stroke-opacity: //表示描边透明度

stroke-linecap //表示描边端点表现方式stroke-linejoin
stroke-linejoin //表示描边转角的表现方式
stroke-miterlimit
http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%https://css-tricks.com/guide-svg-animations-smil/84/
svg animate简单动画

 

<set attributeName=”x” attributeType=”XML” to=”60″ begin=”3s” />
3秒后 沿X轴移动到 60px位置

<set> //可以在特定时间之后修改某个属性值（也可以是CSS属性值）
<animateColor> //废弃<animate>可以实现它的效果
<animateTransform> //跟css的Transform一样
<animateMotion> //让SVG各种图形沿着特定的path路径运动
<animate>
—————————————————————–

<set> 例子：
<text font-family=”microsoft yahei” font-size=”120″ y=”160″ x=”160″>
马
<set attributeName=”x” attributeType=”XML” to=”60″ begin=”3s” /> //3秒<text>X值设置为60
</text>

—————————————————————–

<animateTransform> 例子：

<rect>
<animateTransform
attributeType=”xml” //开始声明xml类型，如果不声明svg会自动匹配（可选）
attributeName=”transform” type=”rotate” //声明动画属性是rotate
from=”0″ to=”90″ //0deg到90deg
begin=”0″ dur=”5s” //过渡时间为5s
fill=”freeze”
/>
</rect>
——————————————————————
<animateMotion> 例子：
<text font-family=”microsoft yahei” font-size=”40″ x=”0″ y=”0″ fill=”#cd0000″>马
<animateMotion path=”M10,80 q100,120 120,20 q140,-50 160,0″ begin=”0s” dur=”3s” rotate=”auto” repeatCount=”indefinite”/>
</text>

<path d=”M10,80 q100,120 120,20 q140,-50 160,0″ stroke=”#cd0000″ stroke-width=”2″ fill=”none” />
—————————————————————-

<animate> 效果组合例子：

 

<svg width=”320″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<text font-family=”microsoft yahei” font-size=”120″ y=”160″ x=”160″>马
<animate attributeName=”x” from=”160″ to=”60″ begin=”0s” dur=”3s” repeatCount=”indefinite” />
<animate attributeName=”opacity” from=”1″ to=”0″ begin=”0s” dur=”3s” repeatCount=”indefinite” />
</text>
</svg>
—————————————————————
animate 属性

attributeName = //要变化的元素属性名称
attributeType = “CSS | XML | auto” //用来表明attributeName属性值的列表，要写css还是写svg,例如css是style=”height:100px”,XML是height=100
from = //
to = //
begin= //
dur= //
calcMode= //
repeatCount= // 动画执行次数
repeatDur= //重复动画的总时间
fill= // 动画结束后是否保持结束后的状态

svg

 

A Guide to SVG Animations (SMIL)

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506262114.html