sublime text3快速生成svg相关结构

http://frontenddev.org/article/sublime-does-text-3-plug-in-custom-emmet-grammatical-rules-in-order-to-quickly-bootstrap-output-component.html

由于emmet对svg的标签支持很不全面，下面是我常用的快捷规则：

{      ///////////////////////////////      // Emmet customization      // Each section has the same meaning as the same-named JSON file      // described here:      // http://docs.emmet.io/customization/      ///////////////////////////////      // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json      "snippets": {          "html": {              // https://github.com/emmetio/emmet/blob/master/snippets.json#L644              "abbreviations": {                  "svg": "<svg width=\"400\" height=\"300\" viewBox=\"0 0 400 300\"></svg>",                  "defs": "<defs></defs>",                  "use": "<use xlink:href=\"#shape\" x=\"50\" y=\"50\"></use>",                  "symbol": "<symbol id=\"shape\"></symbol>",                  "linearGradient": "<linearGradient id=\"linear\" x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"100%\"></linearGradient>",                  "radialGradient": "<radialGradient id=\"radial\" cx=\"0%\" cy=\"0%\" r=\"100%\" fx=\"50%\" fy=\"50%\"></radialGradient>",                  "stop": "<stop offset=\"0%\" stop-color=\"#000\" stop-opacity=\"1\"></stop>",                  "pattern": "<pattern id=\"pattern\" x=\"0\" y=\"0\" width=\"20%\" height=\"20%\" patternUnits=\"userSpaceOnUse\"></pattern>",                  "g": "<g id=\"shape\" stroke=\"red\" fill=\"green\"></g>",                  "rect": "<rect x=\"0\" y=\"0\" width=\"100\" height=\"80\" rx=\"5\" ry=\"5\"></rect>",                  "circle": "<circle cx=\"50\" cy=\"50\" r=\"20\"></circle>",                  "ellipse": "<ellipse cx=\"50\" cy=\"50\" rx=\"20\" ry=\"10\"></ellipse>",                  "line": "<line x1=\"0\" y1=\"0\" x2=\"20\" y2=\"50\" stroke=\"red\"></line>",                  "polyline": "<polyline points=\"0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2\" stroke=\"red\" fill=\"none\"></polyline>",                  "polygon": "<polygon points=\"0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2\"></polygon>",                  "path": "<path d=\"M10,10 L40,60 L20,80 L60,90 L70,20 Z\" stroke=\"red\" fill=\"none\"></path>",                  "text": "<text x=\"50\" y=\"50\" dx=\"20 40 60\" dy=\"20 40 60\" stroke=\"red\" fill=\"green\" font-size=\"30\" font-family=\"Microsoft YaHei\"></text>",                  "tspan": "<tspan stroke=\"red\" fill=\"none\"></tspan>",                  "textPath": "<textPath xlink:href=\"#textPath\"></textPath>",                "clipPath": "<clipPath id=\"clipPath\"></clipPath>",                  "mask": "<mask id=\"mask\"></mask>",                  "animate": "<animate id=\"animate\" attributeName=\"fill\" begin=\"0; animate2.end+1s\" from=\"red\" to=\"blue\" dur=\"2s\" fill=\"freeze\"></animate>",                "animateTransform": "<animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0\" to=\"45\" dur=\"2s\" fill=\"freeze\"></animateTransform>",                "animateMotion": "<animateMotion  path=\"M0,0 L20,100 L80,100 Z\" rotate=\"auto\" dur=\"2s\" fill=\"freeze\"></animateMotion>",            }          }      },      // Output profiles for syntaxes      // http://docs.emmet.io/customization/syntax-profiles/      "syntaxProfiles": {          // Enable XHTML dialect for HTML syntax        // "html": "xhtml"        //         // Write chained CSS abbreviations on single line:        // "css": "css_line"        // force XHTML profile for HTML syntax           "html": "xhtml",           // create our own profile for XML           "xml": {               "tag_case": "upper",               "attr_quotes": "single"           }    }  }