ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

SVG-Snippets

由 jorgeatgu 全部

:beginner: 一组自定义SVG片段，适用于Sublime Text 2/3

标签 片段

详情

  • 0.2.1
  • github．com
  • github．com
  • 8年前
  • 1小时前
  • 10年前

安装次数

  • 总数 11K
  • Win 6K
  • Mac 3K
  • Linux 1K
8月6日 8月5日 8月4日 8月3日 8月2日 8月1日 7月31日 7月30日 7月29日 7月28日 7月27日 7月26日 7月25日 7月24日 7月23日 7月22日 7月21日 7月20日 7月19日 7月18日 7月17日 7月16日 7月15日 7月14日 7月13日 7月12日 7月11日 7月10日 7月9日 7月8日 7月7日 7月6日 7月5日 7月4日 7月3日 7月2日 7月1日 6月30日 6月29日 6月28日 6月27日 6月26日 6月25日 6月24日 6月23日
Windows 0 0 2 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
Mac 1 1 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 1 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0

自述文件

源代码
raw．githubusercontent．com

SVG-Snippets

输入片段缩略码，然后按 Tab 键完成片段。

以下列表中的片段按字母顺序排列。 '$1' 指示光标的位置。一些片段已经设置，按 Tab 键可以跳转到下一个预定义的位置。这有点难以解释，但任何使用 $1/$2/$3 等. 的片段都使用这种技术。

包控制

CodePen

Video Vimeo

圆形

编写 circle

/* after */

<circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>

编写 circle3

/* after */

<circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>
<circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>
<circle r="$1" cx="$2" cy="$3" fill="$4" stroke="$5" stroke-width="$6"/>

编写 circleu

/* after */

<defs>
    <circle id="$1" r="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>
</defs>

<use xlink:href="#$8"/>
<use xlink:href="#$8" x="$9" y="$10"/>

剪裁路径

编写 clippath

/* after */

<defs>
    <clipPath id="$1">
        $2
    </clipPath>
</defs>

定义 + 使用

编写 defsuse

/* after */

<defs>

</defs>

<use xlink:href="#$1"/>
<use xlink:href="#$1" x="$2" y="$3"/>

椭圆

编写 ellipse

/* after */

<ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>

编写 ellipse3

/* after */

<ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<ellipse rx="$1" ry="$2" cx="$3" cy="$4" fill="$5" stroke="$6" stroke-width="$7"/>

编写 ellipseu

/* after */

<defs>
    <ellipse id="$1" rx="$2" ry="$3" cx="$4" cy="$5" fill="$6" stroke="$7" stroke-width="$8"/>
</defs>

<use xlink:href="#$9" />
<use xlink:href="#$9" x="$10" y="$11"/>

组合

编写 group

/* after */

<g id="$1">

    $2

</g>

线条

编写 line

/* after */

<line x1="$1" y1="$2" x2="$3" y2="$4" stroke="$5" stroke-width="$6"/>

编写 lineu

/* after */

<defs>
    <line x1="$1" y1="$2" x2="$3" y2="$4" stroke="$5" stroke-width="$6"/>
</defs>

<use xlink:href="#$7" />
<use xlink:href="#$7" x="$8" y="$9"/>

线性渐变

编写 lineargradient

/* after */

<linearGradient id="$1" gradientUnits="objectBoundingBox">
    <stop offset="$2" stop-color="$3"/>
    <stop offset="$4" stop-color="$5"/>
</linearGradient>

矩阵

编写 matrix

/* after */

transform="matrix($1 $2 $3 $4 $5 $6)"

路径

编写 path

/* after */

<path d="$1" stroke-width="$2" stroke="$3" fill="$4"/>

图案

编写 pattern

/* after */

<defs>
    <pattern id="$1" width="$2" height="$3" patternUnits="userSpaceOnUse">
        $4
    </pattern>
</defs>

多边形

编写 polygon

/* after */

<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

编写 polygon3

/* after */

<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

编写 polygonu

/* after */

<defs>
    <polygon points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
</defs>

<use xlink:href="#$7" />
<use xlink:href="#$7" x="$8" y="$9"/>

多段线

编写 polyline

/* after */

<polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

编写 polyline3

/* after */

<polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>
<polyline points="$1" fill="$2" stroke="$3" stroke-width="$4"/>

编写 polylineu

/* after */

<defs>
    <polyline id="$1" points="$2" fill="$3" stroke="$4" stroke-width="$5"/>
</defs>

<use xlink:href="#$6"/>
<use xlink:href="#$6" x="$7" y="$8"/>

径向渐变

编写 radialgradient

/* after */

<radialGradient id="$1" gradientUnits="objectBoundingBox">
    <stop offset="$2" stop-color="$3"/>
    <stop offset="$4" stop-color="$5"/>
</radialGradient>

矩形

编写 rect

/* after */

<rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>

编写 rect3

编写 rect3

/* after */

<rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>
<rect x="$1" y="$2" width="$3" height="$4" fill="$5" stroke="$6" stroke-width="$7"/>

编写 rectu

编写 rectu

/* after */

<defs>
    <rect id="$1" x="$2" y="$3" width="$4" height="$5" fill="$6" stroke="$7" stroke-width="$8"/>
</defs>

<use xlink:href="#$9"/>
<use xlink:href="#$9" x="$10" y="$11"/>

旋转

编写 rotate

/* after */

transform="rotate($1)"

可伸缩

编写 scalable

/* after */

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            viewBox="$1" width="$2" height="$3" aria-labelledby="title desc">

                <title id="title">$4</title>
                <desc id="desc">$5</desc>

</svg>

可伸缩u

编写 scalableu

/* after */

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            viewBox="$1" width="$2" height="$3" aria-labelledby="title desc">

                <title id="title">$4</title>
                <desc id="desc">$5</desc>

                <defs>



                </defs>


                <use xlink:href="#" x="" y=""/>

</svg>

X倾斜

编写 skewx

/* after */

transform="skewX($1)"

Y倾斜

编写 skewy

/* after */

transform="skewY($1)"

符号

编写 symbol

/* after */

<symbol id="$1">

</symbol>
<use xlink:href="#$1"/>
<use xlink:href="#$1" x="$2" y="$3"/>

文本

编写 text

/* after */

<text x="$1" y="$2" fill="$3">$4</text>

翻译

编写 translate

/* after */

transform="translate($1)"

Tspan

编写 tspan

/* after */

<tspan fill="$1" x="$2" y="$3">$4</tspan>

使用

编写 use

/* after */

<use xlink:href="#$1" x="$2" y="$3"/>

使用3

编写 use3

/* after */

<use xlink:href="#$1"/>
<use xlink:href="#$1" x="$2" y="$3"/>
<use xlink:href="#$1" x="$4" y="$5"/>

具有倒Y轴缩放的

编写 scalablei

/* after */

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
    viewBox="$1 $2 $3 $4" width="$5" height="$6" aria-labelledby="title desc">
        <title id="title">$7</title>
        <desc id="desc">$8</desc>
        <g transform="translate(0,$4) scale(1,-1)">
            ${9:}
        </g>

</svg>