Gauss Zhou

# 填充与边框

可以使用几种方法来着色（包括指定对象的属性）使用内联 CSS 样式、内嵌 CSS 样式，或者使用外部 CSS 样式文件。

# Fill 和 Stroke

# 上色

现在你难免面露难色，但是大多数基本的涂色可以通过在元素上设置两个属性来搞定：fill属性和stroke属性。

fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。

<svg width="310" height="100" style="border: 1px solid;">
  <rect x="10" y="10" width="80" height="80" 
       stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>
</svg>

# 描边

除了颜色属性，还有其他一些属性用来控制绘制描边的方式。

<svg width="160" height="100" style="border: 1px solid;">
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
  <line x1="40" x2="120" y1="50" y2="50" stroke="black" stroke-width="20" stroke-linecap="square"/>
  <line x1="40" x2="120" y1="80" y2="80" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>

<svg width="400" height="100" style="border: 1px solid;">
  <polyline points="10 60 50 20 90 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
 <polyline points="110 60 150 20 190 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="round"/>
  <polyline points="210 60 250 20 290 60" stroke="black" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

<svg width="310" height="100" style="border: 1px solid;">
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" fill="none"
    stroke-linecap="round" stroke-dasharray="5,10,5" />
  <path d="M 10 75 L 190 75" stroke="red" fill="none"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" />
</svg>
  • stroke-width 属性定义了描边的宽度。
  • stroke-linecap 属性控制边框终点的形状。butt square round
  • stroke-linejoin 属性，用来控制两条描边线段之间，用什么方式连接。 miter round bevel
  • stroke-dasharray属性，将虚线类型应用在描边上。

# 使用 CSS

除了定义对象的属性外，你也可以通过 CSS 来样式化填充和描边。语法和在 HTML 里使用 CSS 一样，只不过你要把background-color、border改成fill和stroke。注意，不是所有的属性都能用 CSS 来设置。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style type="text/css">
      #MyRect {
        stroke: black;
        fill: red;
      }
      #MyRect:hover {
        stroke: black;
        fill: blue;
      }
    </style>
  </defs>
  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>

Fill 和 Stroke
上色
描边
使用 CSS