sublime text3快速生成svg相关结构

最新推荐文章于 2024-04-15 15:15:00 发布

vcxiaohan2

最新推荐文章于 2024-04-15 15:15:00 发布

阅读量2.3k

点赞数

分类专栏： svg

本文链接：https://blog.csdn.net/u011500781/article/details/51924240

版权

svg 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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"
           }
    }  
}