svg动画 - css3与svg

Question

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>

Answer 1

How to dynamically show/hide the title bar?

Answer 2

Most css can be applied to svg elements. You just need to write the selector correctly just like writing normal css. If necessary, you can add class or id attributes to path.
Not only css animation, but also svg attributes such as fill can be specified through css.
But sometimes we want some effects and need to change the structure of the graphic. For example, the picture posted by Ti Zhu is a dialog box with an outer ring. If I want the dialog box to flip, I have to take it out separately and make a path. element. At this time, the designer's assistance is needed (if the submitter can modify the svg by hand, it is okay).
http://jsfiddle.net/dw7akdg1/