recherche

Maison  >  Questions et réponses  >  le corps du texte

svg动画 - css3与svg

css3能对svg做哪些动画？且如何做？

附svg文件。

html<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



<svg version="1.1" id="图形" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1000.636px" height="1000.678px" viewBox="15.167 -16.333 1000.636 1000.678"
     enable-background="new 15.167 -16.333 1000.636 1000.678" xml:space="preserve">
<g>
    <path fill="#272636" d="M512.545,923.104c-241.943,0-438.101-196.158-438.101-438.095c0-241.943,196.158-438.101,438.101-438.101
        c241.937,0,438.095,196.158,438.095,438.101C950.641,726.946,754.483,923.104,512.545,923.104L512.545,923.104z M512.545,83.415
        c-221.792,0-401.593,179.801-401.593,401.593c0,221.786,179.801,401.588,401.593,401.588
        c221.786,0,401.588-179.801,401.588-401.588C914.133,263.217,734.332,83.415,512.545,83.415L512.545,83.415z M366.51,777.073
        V631.039H256.987V265.958h511.115v365.081H512.545L366.51,777.073L366.51,777.073z M731.591,302.466H293.495v292.065h109.523
        v109.523l109.528-109.523h219.045V302.466L731.591,302.466z M403.018,485.008h219.05v36.507h-219.05V485.008L403.018,485.008z
         M403.018,375.481h219.05v36.508h-219.05V375.481L403.018,375.481z M403.018,375.481"/>
</g>
</svg>
黄舟黄舟2779 Il y a quelques jours812

répondre à tous(2)je répondrai

  • 高洛峰

    高洛峰2017-04-17 11:14:09

    法实现标题栏的动态显示/隐藏？

    répondre
    0
  • 高洛峰

    高洛峰2017-04-17 11:14:09

    大部分 css 都可以作用于 svg 元素，只需要像写普通 css 一样，把选择器写对就行了。如果需要的话，可以给 path 加上 class 或者 id 属性。
    不光是 css 动画，就连 fill 这样 svg 属性都可以都可以通过 css 来指定。
    但有时候我们想要一些效果需要更改图形的结构，比如提主贴出来的图，是一个对话框加一个外环，如果我想让对话框翻转的话，就要把它单独拿出来做一个 path 元素了。这时候就需要设计师的协助（如果提主自己会手改 svg 的话也可以）。
    http://jsfiddle.net/dw7akdg1/

    répondre
    0
  • Annulerrépondre