SVG动画.心跳(enable-background)

1、ZC:几点:

  (1)、<meta/>貌似只能放在 html中?(于是 这个文件就不能保存成 ?.svg了)

  (2)、enable-background 是什么属性?

  (3)、在SVG文件中,不允许 给<svg/>设置两个width&height属性,html中却可以 它是怎么起作用的?前面的值有效 还是 后面的值有效,还是 计算的? (看效果 像是 前面的值有效)

2、

<html>
<meta name="description" content="心跳动画">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 60 60" style="enable-background:new 0 0 50 50;" xml:space="preserve" width="512px" height="512px">
  <g id="heart">
    <path style="fill:#C03A2B;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543  c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503  c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
    <path style="fill:#ED7161;" d="M6,18.078c-0.553,0-1-0.447-1-1c0-5.514,4.486-10,10-10c0.553,0,1,0.447,1,1s-0.447,1-1,1  c-4.411,0-8,3.589-8,8C7,17.631,6.553,18.078,6,18.078z"/>
  </g>


  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>


<style id="jsbin-css">
svg
{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#heart
{
  animation-name: beat;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes beat
{
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>
<script src="https:////code.h5jun.com/js/render/edit.js?3.40.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"https:////code.h5jun.com","root":"//code.h5jun.com"});</script>

 </html>

 

3、

4、

5、

 

posted @ 2018-02-08 14:54  HtmlUI  阅读(803)  评论(0编辑  收藏  举报