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、