填充和描边属性
绘制
可以通过设置节点上的两个属性来完成基本着色：fill（填充）和 stroke（描边）。使用 fill 可以设置对象内部的颜色，而 stroke 则设置围绕对象绘制的线条的颜色。您可以使用与 HTML 中相同的 CSS 颜色命名方案，无论是颜色名称（如 red）、rgb 值（如 rgb(255 0 0)）、十六进制值等。
<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
x="10"
y="10"
width="100"
height="100"
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8"
stroke-width="15" />
</svg>
此外，您还可以在 SVG 中单独指定 fill 或 stroke 的不透明度。这些由 fill-opacity 和 stroke-opacity 属性控制。
描边
除了其颜色属性外，还有一些其他属性可用于控制在线条上绘制描边的方式。
<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
<line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
<line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
stroke-width 属性定义了描边的宽度。描边在路径周围居中绘制。在上例中，路径显示为粉色，描边显示为黑色。
影响描边的第二个属性是 stroke-linecap 属性，如上所示。这控制了线条末端的形状。
stroke-linecap 有三个可能的值
butt用一个平直的边缘封闭线条，该边缘垂直于描边的方向（成 90 度）并延伸到其末端。square的外观基本相同，但会将描边稍微延伸到实际路径之外。超出路径的描边距离是stroke-width的一半。round在描边的末端产生圆角效果。此曲线的半径也由stroke-width控制。
使用 stroke-linejoin 控制两个线段之间的连接点的绘制方式。
<?xml version="1.0" standalone="no"?>
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
stroke-linecap="round" fill="none" stroke-linejoin="round"/>
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
</svg>
这些折线中的每一条都有两个线段。这两个线段连接处的连接点由 stroke-linejoin 属性控制。此属性有三个可能的值。miter 会将线条稍微延伸到其正常宽度之外，以创建只有一个角度的方形转角。round 创建一个圆角线段。bevel 创建一个新角度，以帮助两个线段之间的过渡。
最后，您还可以通过指定 stroke-dasharray 属性来使用虚线类型的描边。
<?xml version="1.0" standalone="no"?>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red"
stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>
stroke-dasharray 属性可以接受一系列由逗号和/或空格分隔的数字作为其参数。
第一个数字指定了填充区域的距离，第二个数字指定了未填充区域的距离。因此，在上例中，第二个路径填充 5 个像素单位，有 5 个空白单位，然后是下一个 5 个单位的虚线。您可以指定更多数字以获得更复杂的虚线模式。第一个示例指定了三个数字，在这种情况下，渲染器会循环使用这些数字两次以创建均匀的图案。因此，第一个路径渲染 5 个填充，10 个空白，5 个填充，然后循环回到创建 5 个空白，10 个填充，5 个空白。然后模式重复。
还有其他 stroke 和 fill 属性可用，包括 fill-rule，它指定如何填充重叠自身的形状；stroke-miterlimit，它确定描边是否应绘制斜接；以及 stroke-dashoffset，它指定在直线上虚线数组的起始位置。
绘制顺序
填充和描边的绘制顺序可以通过 paint-order 属性进行控制。
<?xml version="1.0" standalone="no"?>
<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline
points="40 80 80 40 120 80"
stroke-width="15"
stroke="black"
fill="coral"
paint-order="fill" />
<polyline
points="40 140 80 100 120 140"
stroke-width="15"
stroke="black"
fill="coral"
paint-order="stroke" />
</svg>
对于第一个形状，填充在描边之前渲染，因此黑色描边出现在填充之上。对于第二个形状，描边在填充之前渲染。
使用 CSS
除了在对象上设置属性外，您还可以使用 CSS 为填充和描边设置样式。并非所有属性都可以通过 CSS 设置。通常可以使用与绘制和填充相关的属性，因此 fill、stroke、stroke-dasharray 等都可以通过这种方式设置，以及下面显示的渐变和图案版本。诸如 width、height 或 <path> 命令之类的属性不能通过 CSS 设置。最简单的方法是进行测试，找出哪些可用，哪些不可用。
注意： SVG 规范严格区分了“属性”和其他属性。前者可以通过 CSS 修改，后者则不能。
CSS 可以通过 style 属性内联插入到元素中
<rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
或者可以将其移至您包含的特殊样式部分。但是，与 HTML 中将此类部分放在 <head> 部分不同，它包含在一个称为 <defs> 的区域中。
<defs> 代表定义（definitions），在这里您可以创建不直接出现在 SVG 中但被其他元素使用的元素。
<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style><![CDATA[
#MyRect {
stroke: black;
fill: red;
paint-order: stroke;
}
]]></style>
</defs>
<rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>
将样式移到这样的区域可以更轻松地调整大量元素的属性。您还可以使用诸如 **:hover 伪类**之类的东西来创建悬停效果
#MyRect:hover {
stroke: black;
fill: blue;
}
您还可以通过 正常的 XML 样式表语法为您的 CSS 规则指定外部样式表
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect height="10" width="10" id="MyRect"/>
</svg>
其中 style.css 的内容大致如下
#MyRect {
fill: red;
stroke: black;
}