阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      SVG Stroke 属性

      Fill

      现在你难免面露难色,但是大多数基本的涂色可以通过在元素上设置两个属性来搞定:fill属性和stroke属性。fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色。你可以使用在HTML中的CSS颜色命名方案定义它们的颜色,比如说颜色名(像red这种)、rgb值(像rgb(255,0,0)这种)、十六进制值、rgba值,等等。

      <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
             fill-opacity="0.5" stroke-opacity="0.8"/>
      

      此外,在SVG中你可以分别定义填充色和边框色的不透明度,属性fill-opacity控制填充色的不透明度,属性stroke-opacity控制描边的不透明度。

      注意,FireFox 3+支持rgba值,并且能够提供同样的效果,但是为了在其他浏览器中保持兼容,最好将它和填充/描边的不透明度分开使用。如果同时指定了rgba值和填充/描边不透明度,它们将都被调用。

      SVG Stroke 属性

      SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:

      • stroke
      • stroke-width
      • stroke-linecap
      • stroke-dasharray

      所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓。


      Stroke属性定义一条线,文本或元素轮廓颜色:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none">
          <path stroke="red" d="M5 20 l215 0" />
          <path stroke="blue" d="M5 40 l215 0" />
          <path stroke="black" d="M5 60 l215 0" />
        </g>
      </svg>
      

      渲染效果



      SVG stroke-width 属性

      stroke-width属性定义了描边的宽度。注意,描边是以路径为中心线绘制的,在上面的例子里,路径是粉红色的,描边是黑色的。如你所见,路径的每一侧都有均匀分布的描边。

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black">
          <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>
      

      渲染效果



      SVG stroke-linecap 属性

      stroke-linecap属性的值有三种可能值:

      • butt用直边结束线段,它是常规做法,线段边界90度垂直于描边的方向、贯穿它的终点。
      • square的效果差不多,但是会稍微超出实际路径的范围,超出的大小由stroke-width控制。
      • round表示边框的终点是圆角,圆角的半径也是由stroke-width控制的。

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="6">
          <path stroke-linecap="butt" d="M5 20 l215 0" />
          <path stroke-linecap="round" d="M5 40 l215 0" />
          <path stroke-linecap="square" d="M5 60 l215 0" />
        </g>
      </svg>
      

      渲染效果



      SVG stroke-linejoin属性

      来控制两条描边线段之间,用什么方式连接。

      每条折线都是由两个线段连接起来的,连接处的样式由stroke-linejoin属性控制,它有三个可用的值,miter是默认值,表示用方形画笔在连接处形成尖角,round表示用圆角连接,实现平滑效果。最后还有一个值bevel,连接处会形成一个斜接。

      代码如下

      <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>
      

      SVG stroke-dasharray 属性

      strokedasharray 属性用于创建虚线:

      下面是SVG代码:

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="4">
          <path stroke-dasharray="5,5" d="M5 20 l215 0" />
          <path stroke-dasharray="10,10" d="M5 40 l215 0" />
          <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
        </g>
      </svg>
      

      渲染效果


      stroke-dasharray属性的参数,是一组用逗号分割的数字组成的数列。

      注意,和path不一样,这里的数字必须用逗号分割(空格会被忽略)。

      每一组数字,第一个用来表示填色区域的长度,第二个用来表示非填色区域的长度。所以在上面的例子里,第二个路径会先做5个像素单位的填色,紧接着是5个空白单位,然后又是5个单位的填色。

      如果你想要更复杂的虚线模式,你可以定义更多的数字。第一个例子指定了3个数字,这种情况下,数字会循环两次,形成一个偶数的虚线模式(奇数个循环两次变偶数个)。

      所以该路径首先渲染5个填色单位,10个空白单位,5个填色单位,然后回头以这3个数字做一次循环,但是这次是创建5个空白单位,10个填色单位,5个空白单位。

      通过这两次循环得到偶数模式,并将这个偶数模式不断重复。

      另外还有一些关于填充和边框的属性,包括fill-rule,用于定义如何给图形重叠的区域上色;stroke-miterlimit,定义什么情况下绘制或不绘制边框连接的miter效果;还有stroke-dashoffset,定义虚线开始的位置。

      <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>
      

      渲染效果

      使用CSS

      除了定义对象的属性外,你也可以通过CSS来样式化填充和描边。语法和在html里使用CSS一样,只不过你要把background-colorborder 改成 fillstroke

      注意,不是所有的属性都能用CSS来设置。

      上色和填充的部分一般是可以用CSS来设置的,比如 fillstrokestroke-dasharray 等,但是不包括下面会提到的渐变和图案等功能。

      另外,width、height,以及路径的命令等等,都不能用css设置。判断它们能不能用CSS设置还是比较容易的。

      SVG规范 https://www.w3.org/TR/SVG/propidx.html 将属性区分成properties和其他attributes,前者是可以用CSS设置的,后者不能。

      CSS可以利用style属性插入到元素的行间:

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

      或者利用<style>设置一段样式段落。

      就像在html里这样的<style>一般放在<head>里,在svg里<style>则放在<defs>标签里。<defs>表示定义,

      这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。

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

      如上把样式放到一块你可以更轻松地调整一大组元素的样式,同样你也可以使用hover这样的伪类来创建翻转之类的效果:

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

      你最好读一下CSS教程以便掌握它,一些可以在html里使用的css,在svg里可能无法正常工作,比如before和after伪类。所以这里需要一点经验。

      你也可以定义一个外部的样式表

      <?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;
      }
      
      目录
      目录