填充和描边

有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件。您在网络上找到的大多数 SVG 都使用内联 CSS，但每种类型都有其优点和缺点。

填充和描边属性

绘制

可以通过在节点上设置两个属性来完成基本的着色：fill 和 stroke。使用 fill 设置对象内部的颜色，而 stroke 设置围绕对象绘制的线条的颜色。您可以使用与在 HTML 中相同的 CSS 颜色命名方案，无论是颜色名称（如 red）、rgb 值（如 rgb(255 0 0)）、十六进制值等。

html
<?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 属性控制。

描边

除了其颜色属性外，还有其他一些属性可用于控制在线条上绘制描边的方式。

The stroke-linecap attribute changes the look of these stroke's ends: square adds a square cap, round provides a rounded cap, and butt removes capping

xml
<?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 控制如何绘制两条线段之间的连接。

The stroke-linejoin attribute changes the look at the point where two lines join, with miter created an angled join, round rounding the corner, and bevel creating a beveled edge, flattening the corner.

xml
<?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 属性在描边上使用虚线类型。

Two custom dashed lines, one with evenly spaced dashes and the other using a long-dash short dash using a stroke-dasharray attribute value.

xml
<?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 属性控制填充和描边的绘制顺序。

html
<?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 属性内联到元素中

xml
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>

或者它可以移动到您包含的特殊样式部分。但是，与在 HTML 中的操作不同，您不会将此类部分塞入 <head> 部分，而是将其包含在一个名为 <defs> 的区域中。

<defs> 代表定义，您可以在此处创建不直接出现在 SVG 中但由其他元素使用的元素。

xml
<?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伪类之类的功能来创建悬停效果。

css
#MyRect:hover {
  stroke: black;
  fill: blue;
}

您还可以通过标准的 XML-stylesheet 语法为 CSS 规则指定外部样式表。

xml
<?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看起来像这样

css
#MyRect {
  fill: red;
  stroke: black;
}