TSystems

外观

SVG ​

介绍 ​

SVG

🎉 SVG 是 Scalable Vector Graphics 的缩写。它使用 XML 格式来表达矢量图形。矢量图形与使用像素表示图像的位图不一样，放大后不会失真。主流浏览器都支持 SVG。

相比 Canvas，SVG 的优点有：

  • 可缩放：SVG 图形是基于矢量的，可在不丢失清晰度的情况下任意放大、缩小，放大不会导致文件变大。
  • 文本形式：SVG 文件是以 XML 格式编写的，其中的文字就是文本，有利于 SEO，也方便选中复制和修改。
  • 支持绑定事件
  • DOM 集成：SVG 可以嵌入到 HTML 文档中的其他元素中。
  • 支持 CSS 调整样式，支持 CSS 动画。

相比 Canvas，SVG 的缺点有：

  • 如果图形描述起来很复杂，SVG 可能会很大，加载和渲染会有性能问题。
  • 即便 SVG 中的 DOM 结点数量没有很多，当更新频率高时，也可能会有性能问题。

通过上面的描述，我觉得 SVG 最适合的场景是：要支持高精度展示并且图形本身描述起来不复杂的场景。

免费资源 ​

基础形状 ​

矩形 ​

矩形 ​

svg
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>

带边框的矩形 ​

svg
<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
  <rect width="300" height="100" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>

带透明度的矩形 ​

svg
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

带圆角的矩形 ​

rx = 10, ry = 10 ​
svg
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10" rx="10" ry="10"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
rx = 10, ry = 30 ​
svg
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10" rx="10" ry="30"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
rx = 30, ry = 10 ​
svg
<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10" rx="30" ry="10"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

圆形 ​

圆形 ​

svg
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle r="45" cx="50" cy="50" fill="red" />
</svg>

带边框的圆形 ​

svg
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" />
</svg>

带透明度的圆形 ​

svg
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" opacity="0.5" />
</svg>

椭圆 ​

椭圆 ​

svg
<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
  <ellipse rx="100" ry="50" cx="120" cy="80"
  style="fill:yellow;stroke:green;stroke-width:3" />
</svg>

多个椭圆堆叠 ​

svg
<svg height="150" width="500" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>

两个椭圆相交 ​

svg
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />
</svg>

线段 ​

斜线段 ​

svg
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="300" y2="100" style="stroke:red;stroke-width:2" />
</svg>

水平线段 ​

svg
<svg height="50" width="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="10" x2="250" y2="10" style="stroke:red;stroke-width:12" />
</svg>

竖直线段 ​

svg
<svg height="210" width="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />
</svg>

多段线/折线 ​

多段线 ​

svg
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polyline points="0,0 50,150 100,75 150,50 200,140 250,140"
  style="fill:none;stroke:green;stroke-width:3" />
</svg>

使用连续的横竖线段画一个台阶 ​

svg
<svg height="180" width="500" xmlns="http://www.w3.org/2000/svg">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style="fill:yellow;stroke:red;stroke-width:4" />
</svg>

多边形 ​

三角形 ​

svg
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 150,190 50,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

四边形 ​

svg
<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

六边形 ​

svg
<svg height="280" width="360" xmlns="http://www.w3.org/2000/svg">
  <polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
  style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

全填充的多边形星星 ​

svg
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>

使用 fill-rule 实现部分填充的多边形星星 ​

svg
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

路径 ​

SVG d 属性中的字母说明

  • M = moveto (move from one point to another point)
  • L = lineto (create a line)
  • H = horizontal lineto (create a horizontal line)
  • V = vertical lineto (create a vertical line)
  • C = curveto (create a curve)
  • S = smooth curveto (create a smooth curve)
  • Q = quadratic Bézier curve (create a quadratic Bézier curve)
  • T = smooth quadratic Bézier curveto (create a smooth quadratic Bézier curve)
  • A = elliptical Arc (create a elliptical arc)
  • Z = closepath (close the path)

Note: All the commands above can also be expressed in lower case. Upper case means absolutely positioned, lower case means relatively positioned.

简单路径 ​

svg
<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg">
  <path d="M150 5 L75 200 L225 200 Z"
  style="fill:none;stroke:green;stroke-width:3" />
</svg>

贝赛尔曲线 ​

ABC
svg
<svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">

<!-- Draw the paths -->
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="4"/>
<path id="lineMID" d="M 175 200 l 150 0" stroke="green" stroke-width="4"/>
<path id="lineAC" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="4" fill="none"/>

<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="4" />
<circle id="pointB" cx="250" cy="50" r="4" />
<circle id="pointC" cx="400" cy="350" r="4" />
</g>

<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="green" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>

</svg>

非图形元素 ​

文本 ​

简单文本 ​

I love SVG!
svg
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="15" fill="red">I love SVG!</text>
</svg>

空心文本 ​

I love SVG!
svg
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="none" stroke="red" font-size="35">I love SVG!</text>
</svg>

有填充色的文本 ​

I love SVG!
svg
<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="pink" stroke="blue" font-size="35">I love SVG!</text>
</svg>

旋转文本中的每个字 ​

I love SVG!
svg
<svg height="40" width="200">
  <text x="5" y="30" fill="red" font-size="35" rotate="30">I love SVG!</text>
</svg>

整体旋转文本 ​

I love SVG!
svg
<svg height="100" width="200">
  <text x="5" y="30" fill="red" font-size="25" transform="rotate(30 20,40)">I love SVG!</text>
</svg>

嵌套文本 ​

TSPAN

内嵌于 或其他 元素之内，类似 HTML 里的 元素。
I Love SVG!
svg
<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="red" font-size="35">I Love
    <tspan fill="none" stroke="green">SVG</tspan>!
  </text>
</svg>

按路径绘制文本 ​

相关属性

  • href: The URL to the path to render the text
  • lengthAdjust: How to compress or stretch the text to fit the width defined by the textLength attribute. Can be spacing|spacingAndGlyphs. Default is spacing
  • method: How to render the glyphs along the path. Can be align|stretch. Default is align
  • spacing: The space between glyphs. Can be auto|exact. Default is exact
  • startOffset: How far the beginning of the text should be offset from the beginning of the path. Can be a length, percentage or a number
  • textLength: The width of the text along the path. Can be a length, percentage or a number. Default is auto

将文本按 href 属性指定路径绘制 ​

I love SVG! I love SVG!
svg
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
  <path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
  <text style="fill:red;font-size:25px;">
    <textPath href="#lineAC" startOffset="80">I love SVG! I love SVG!</textPath>
  </text>
</svg>

指定 textLength ​

百分比值

textLength="100%" 中的百分比值是相对于父元素的。在下面的例子中，其实就是 <svg /> 元素的 width="350"。

I love SVG! I love SVG!
svg
<svg height="200" width="350" xmlns="http://www.w3.org/2000/svg">
  <path id="lineAC" d="M 30 180 q 150 -250 300 0" stroke="blue" stroke-width="2" fill="none"/>
  <text style="fill:red;font-size:25px;">
    <textPath href="#lineAC" textLength="100%" startOffset="0">I love SVG! I love SVG!</textPath>
  </text>
</svg>

给文本添加超链接 ​

I love SVG!
svg
<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.orzzone.com/" target="_blank">
    <text x="5" y="15" fill="red">I love SVG!</text>
  </a>
</svg>
svg
<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
  <a href="https://www.orzzone.com/" target="_blank">
    <circle r="45" cx="50" cy="50" fill="red" />
  </a>
</svg>

图像 ​

插入一张图 ​

svg
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
  <image height="200" width="300" href="./attachments/svg.svg" />
</svg>

增加其他图形 ​

I Love SVG!
svg
<svg height="250" width="300" xmlns="http://www.w3.org/2000/svg">
  <circle r="105" cx="150" cy="120" fill="lightblue" />
  <image x="0" y="60" width="300" height="100" href="./attachments/svg.svg" />
  <text x="108" y="180" fill="black">I Love SVG!</text>
</svg>

标记 ​

带开始和结束标记的线段 ​

svg
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
      <circle cx="5" cy="5" r="3" fill="black" />
    </marker>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="300" y2="200" stroke="red" stroke-width="3" marker-start="url(#circle)" marker-end="url(#arrow)" />
</svg>

带中间标记的多线段 ​

svg
<svg height="250" width="350" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="circle" markerWidth="8" markerHeight="8" refX="5" refY="5">
      <circle cx="5" cy="5" r="2" fill="black" />
    </marker>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
    </marker>
  </defs>
  <polyline points="15,40 15,170 200,170" stroke="red" stroke-width="3" fill="none" marker-start="url(#circle)" marker-mid="url(#circle)" marker-end="url(#arrow)" />
</svg>

效果 ​

填充 ​

填充效果 ​

I love SVG!
svg
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" />
  <rect width="150" height="100" x="120" y="50" fill="blue" />
  <circle r="45" cx="350" cy="100" fill="red" />
  <text x="420" y="100" fill="red">I love SVG!</text>
</svg>

使用 fill-opacity 实现带透明度的填充效果 ​

I love SVG!
svg
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />
  <rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%" />
  <circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />
  <text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>
</svg>

使用 fill-rule="evenodd" 指定填充规则 ​

svg
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd" />
</svg>

使用 fill-rule="nonzero" 指定填充规则 ​

svg
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />
</svg>

描边 ​

使用 stroke 指定描边颜色 ​

I love SVG!
svg
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,10 0,190 100,190" fill="lime" stroke="red" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" />
  <text x="420" y="100" fill="red" stroke="blue">I love SVG!</text>
</svg>
svg
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="green" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

使用 stroke-width 指定描边宽度 ​

I love SVG!
svg
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" />
  <text x="420" y="100" fill="red" stroke="blue" stroke-width="4">I love SVG!</text>
</svg>
svg
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

使用 stroke-opacity 指定描边透明度 ​

I love SVG!
svg
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-opacity="0.4" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-opacity="0.4" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-opacity="0.4" />
  <text x="420" y="100" fill="red" stroke="blue" stroke-width="4" stroke-opacity="0.4">I love SVG!</text>
</svg>
svg
<svg height="80" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red">
    <path stroke-width="2" stroke-opacity="0.4" d="M5 20 l215 0" />
    <path stroke-width="4" stroke-opacity="0.4" d="M5 40 l215 0" />
    <path stroke-width="6" stroke-opacity="0.4" d="M5 60 l215 0" />
  </g>
</svg>

使用 stroke-linecap 指定描边端点样式 ​

svg
<svg height="120" width="300" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red" stroke-width="16">
    <path stroke-linecap="butt" d="M10 20 l215 0" />
    <path stroke-linecap="round" d="M10 50 l215 0" />
    <path stroke-linecap="square" d="M10 80 l215 0" />
  </g>
</svg>

使用 stroke-dasharray 指定虚线模式 ​

svg
<svg height="100" width="400" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="red" stroke-width="6">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="35,10" d="M5 60 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 80 l215 0" />
  </g>
</svg>
svg
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,10 10,190 110,190" fill="lime" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
  <rect width="150" height="100" x="120" y="50" fill="yellow" stroke="red" stroke-width="4" stroke-dasharray="10,5" />
  <circle r="45" cx="350" cy="100" fill="pink" stroke="blue" stroke-width="4" stroke-dasharray="10,5" />
</svg>

使用 stroke-linejoin 指定描边连接点的样式 ​

stroke-linejoin="round" ​
svg
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="round" />
  <rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="round" />
</svg>
stroke-linejoin="miter" ​
svg
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="miter" />
  <rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="miter" />
</svg>
stroke-linejoin="bevel" ​
svg
<svg width="600" height="230" xmlns="http://www.w3.org/2000/svg">
  <polygon points="55,25 10,190 110,190" fill="lime" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
  <rect width="150" height="100" x="140" y="50" fill="yellow" stroke="red" stroke-width="16" stroke-linejoin="bevel" />
</svg>

滤镜 ​

简单示例 ​

svg
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>

SVG 中可用的滤镜元素 ​

TIP

对同一个 SVG 元素，你可以同时使用多个滤镜元素。

  • <feBlend />: Combines two graphics together by a certain blending mode
  • <feColorMatrix />: Changes colors based on a transformation matrix
  • <feComponentTransfer />: Performs component-wise remapping of data for each pixel. Can adjust brightness, contrast, color balance, etc
  • <feComposite />: Performs combination of two input images pixel-wise in image space using a compositing operation
  • <feConvolveMatrix />: Applies a matrix convolution filter effect (this includes blurring, edge detection, sharpening, embossing and beveling)
  • <feDiffuseLighting />: Lights a graphic by using the alpha channel as a bump map
  • <feDisplacementMap />: Uses pixels values from the graphic from in2 attribute to displace the image from the in attribute
  • <feDistantLight />: Specifies a distant light source to be used inside a lighting filter primitive: <feDiffuseLighting /> or <feSpecularLighting />
  • <feDropShadow />: Creates a drop shadow of the graphic
  • <feFlood />: Fills the filter subregion with the color and opacity defined by flood-color and flood-opacity attributes
  • <feGaussianBlur />: Blurs the graphic
  • <feImage />: Gets graphic data from an external source and provides the pixel data as output
  • <feMerge />: Blends input graphic layers (applies filter effects concurrently instead of sequentially)
  • <feMergeNode />: Takes the result of another filter to be processed by its parent <feMerge />
  • <feMorphology />: Erodes or dilates the graphic (for fattening or thinning effects)
  • <feOffset />: Offsets the input graphic
  • <fePointLight />: Specifies a light source that allows creating a point light effect
  • <feSpecularLighting />: Lights a source graphic by using the alpha channel as a bump map
  • <feSpotLight />: Specifies a light source that allows creating a spotlight effect
  • <feTile />: Fills a target rectangle with a repeated pattern of an input graphic
  • <feTurbulence />: Creates a graphic with the Perlin turbulence function

虚化 ​

虚化效果 ​

svg
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

stdDeviation 值越高虚化程度越高 ​

svg
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
      <feGaussianBlur in="SourceGraphic" stdDeviation="55" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f2)" />
</svg>

投影 ​

使用 <feDropShadow /> 给图像添加阴影效果 ​

svg
<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1">
      <feDropShadow dx="12" dy="14" stdDeviation="1" flood-opacity="0.7"/>
    </filter>
  </defs>
  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>

<feOffset /> 和 <feBlend /> ​

Sorry, your browser does not support inline SVG.
svg
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f11" width="120" height="120">
      <feOffset in="SourceGraphic" dx="40" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f11)" />
  Sorry, your browser does not support inline SVG.
</svg>

使用 <feGaussianBlur /> 虚化图片 ​

svg
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f2" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f2)" />
</svg>

黑色阴影 ​

svg
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f3" width="120" height="120">
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>

使用色彩矩阵处理阴影 ​

svg
<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f4" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>

线性渐变 ​

横向线性渐变 ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

纵向线性渐变 ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>

带文本的横向线性渐变 ​

SVG
svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

角度渐变 ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad5" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>

径向渐变 ​

径向渐变 ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>

左上方开始径向渐变 ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad3" cx="25%" cy="25%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>

spreadMethod="reflect" ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad4" cx="25%" cy="25%" spreadMethod="reflect">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
</svg>

spreadMethod="repeat" ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad5" cx="25%" cy="25%" spreadMethod="repeat">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>

stop-opacity ​

svg
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="grad6" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" stop-opacity="1" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad6)" />
</svg>

模式 ​

SVG 模式 ​

svg
<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="patt1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" fill="red" />
    </pattern>
  </defs>

  <rect width="200" height="100" x="0" y="0" stroke="black" fill="url(#patt1)" />
</svg>

带渐变的模式 ​

svg
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    <pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
      <rect x="0" y="0" width="50" height="50" fill="lightblue" />
      <circle cx="25" cy="25" r="20" fill="url(#grad1)" fill-opacity="0.8" />
    </pattern>
  </defs>

  <rect width="200" height="200" x="0" y="0" stroke="black" fill="url(#patt2)" />
</svg>

变换 ​

translate ​

svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 0)" />
</svg>
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" />
</svg>
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" />
  <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(50 50)" />
</svg>

scale ​

svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="50" cy="25" r="20" fill="red" transform="scale(2)" />
</svg>
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="70" cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="25" cy="25" r="20" fill="yellow" />
  <circle cx="50" cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>

rotate ​

svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)" />
</svg>

skewX ​

svg
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(10)" />
</svg>
svg
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewX(30)" />
</svg>

skewY ​

svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(10)" />
</svg>
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="5" width="40" height="40" fill="blue" transform="skewY(30)" />
</svg>

裁剪 ​

裁剪 ​

svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill="red" />
</svg>
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="cut-bottom">
      <rect x="0" y="0" width="200" height="50" />
    </clipPath>
  </defs>
  <circle cx="100" cy="100" r="100" fill="red" clip-path="url(#cut-bottom)" />
</svg>

遮罩 ​

遮罩 ​

svg
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask1">
      <rect x="0" y="0" width="10" height="30" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask="url(#mask1)" />
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" />
</svg>
svg
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask2">
      <circle cx="50" cy="50" r="30" fill="yellow" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="blue" mask="url(#mask2)" />
  <rect x="0" y="0" width="100" height="100" stroke="black" fill="none"/>
</svg>

fill 颜色值和透明度 ​

svg
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="mask3">
      <rect x="0" y="0" width="100" height="30" fill="#232323" />
      <rect x="0" y="30" width="100" height="40" fill="#454545" />
      <rect x="0" y="70" width="100" height="30" fill="#878787" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask3)"/>
</svg>

在遮罩中应用渐变 ​

svg
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#000000" />
    </linearGradient>
    <mask id="mask4">
      <rect x="0" y="0" width="100" height="100" fill="url(#gradient1)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" fill="red" mask=" url(#mask4)"/>
</svg>

动画 ​

set ​

半径将在3秒后从25变成50。

Sorry, your browser does not support inline SVG.
svg
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" style="fill:red;">
    <set attributeName="r" to="50" begin="3s" />
    Sorry, your browser does not support inline SVG.
  </circle>
</svg>

animate ​

svg
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      repeatCount="indefinite" />
  </circle>
</svg>

在终点处结束动画 ​

svg
<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      fill="freeze" />
  </circle>
</svg>

animateTransform ​

svg
<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="30" y="30" height="110" width="110" style="stroke:green;fill:red">
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="10s"
      type="rotate"
      from="0 85 85"
      to="360 85 85"
      repeatCount="indefinite" />
  </rect>
</svg>

animateMotion ​

It's SVG!
svg
<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect x="45" y="18" width="155" height="45" style="stroke:green;fill:none;">
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
  <text x="50" y="50" style="font-family:Verdana;font-size:32">It's SVG!
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
</text>
</svg>

其他 ​

编程 ​

简单编程示例 ​

html
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="25" style="fill:red;" />
</svg>

<input type="button" value="Change Radius" onclick="changeRadius()" />

<script>
  function changeRadius() {
    document.getElementById("circle1").setAttribute("r", "50");
  }
</script>

修改 CSS ​

html
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle2" cx="50" cy="50" r="25" style="fill:red;" />
  Sorry, your browser does not support inline SVG.
</svg>

<input type="button" value="Change Style" onclick="changeStyle()" />

<script>
  function changeStyle() {
    document.getElementById("circle2").style.fill = "green";
  }
</script>

修改属性和css ​

html
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle3" cx="50" cy="60" r="25" style="fill:red;" />
</svg>

<input type="button" value="Change Circle" onclick="changeMe()" />

<script>
  function changeMe() {
    var c = document.getElementById("circle3");
    c.setAttribute("r", "50");
    c.setAttribute("cx", "150");
    c.style.fill = "green";
    c.style.stroke = "red";
  }
</script>

通过脚本实现动画 ​

html
<svg width="600" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle4" cx="50" cy="50" r="50" style="fill:red;" />
</svg>

<script>
  var t = null;

  function start() {
    if (t == null) {
      t = setInterval(animate, 20);
    }
  }

  function stop() {
    if (t != null) {
      clearInterval(t);
      t = null;
    }
  }

  function animate() {
    var circle = document.getElementById("circle4");
    var cx = circle.getAttribute("cx");
    var newCX = 2 + parseInt(cx);
    if (newCX > 600) {
      newCX = 50;
    }
    circle.setAttribute("cx", newCX);
  }
</script>

<br />
<input type="button" value="Start" onclick="start()" />
<input type="button" value="Stop" onclick="stop()" />

TSystems 是一款多产品全栈开发套件，提供开箱即用的通用业务能力，快速批量构建 Web 产品。

Copyright © 2023-2026 TSystems 版权所有。保留一切权利。