styling the SVG images

SVG不像canvas，SVG的所有元素都是以DOM元素存在于文档中的，我们可以像给任何普通的dom元素添加css样式一样，可以对svg的元素做styling.不过SVG元素的css样式名称和普通html元素的css样式属性名称还是有所区别的。下面给出一个完整的列表供参考

CSS Property	Description
`fill`	Sets fill color of the shape.
`fill-opacity`	Sets fill opacity of the shape.
`fill-rule`	Sets fill rule of the shape.
`marker`	Sets marker used along the lines (edges) of this shape.
`marker-start`	Sets start marker used along the lines (edges) of this shape.
`marker-mid`	Sets mid marker used along the lines (edges) of this shape.
`marker-end`	Sets end marker used along the lines (edges) of this shape.
`stroke`	Sets the stroke (line) color used to draw the outline of this shape.
`stroke-dasharray`	Sets the stroke (line) dashing used to draw the outline of this shape.
`stroke-dashoffset`	Sets the stroke (line) dash offset used to draw the outline of this shape.
`stroke-linecap`	Sets the stroke (line) line cap used to draw the outline of this shape. Valid values are `round`, `butt` and `square`.
`stroke-miterlimit`	Sets the stroke (line) miter limit used to draw the outline of this shape.
`stroke-opacity`	Sets the stroke (line) opacity used to draw the outline of this shape.
`stroke-width`	Sets the stroke (line) width used to draw the outline of this shape.
`text-rendering`	Sets the text-rendering used to draw the outline of this shape.

text元素拥有的css属性

CSS Property	Description
`alignment-baseline`	Sets how the text is aligned to its `x` and `y` coordinates.
`baseline-shift`	Sets the baseline shift used to render text.
`dominant-baseline`	Sets the dominant baseline.
`glyph-orientation-horizontal`	Sets horizontal glyph orientation.
`glyph-orientation-vertical`	Sets vertical glyph orientation.
`kerning`	Sets the kerning of the rendered text (kern

给SVG元素配置css样式的几种方式:

使用svg属性直接在svg元素中定义:

<circle stroke="#000000" fill="#00ff00" />

使用style属性中定义css样式的方式:

<circle style="stroke: #000000; fill:#00ff00;" />

使用inline stylesheets

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <style type="text/css" >
      <![CDATA[

        circle {
           stroke: #006600;
           fill:   #00cc00;
        }

      ]]>
    </style>
    
    <circle  cx="40" cy="40" r="24"/>
</svg>

或者

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <style type="text/css" >
      <![CDATA[

        circle.myGreen {
           stroke: #006600;
           fill:   #00cc00;
        }
       circle.myRed {
       stroke: #660000;
       fill:   #cc0000;
    }

      ]]>
    </style>

    <circle  class="myGreen" cx="40" cy="40"  r="24"/>
    <circle  class="myRed"   cx="40" cy="100" r="24"/>
</svg>

使用外部文件方式(注意存在兼容性问题，貌似firefox 3是不工作的)

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">


    <circle cx="40" cy="40" r="24"
       style="stroke:#006600; fill:#00cc00"/>

</svg>

直接在html文档中定义和使用css样式

<html>
<body>

<style>
  circle {
     stroke: #006600;
     fill  : #00cc00;
  }
</style>

<svg>
  <circle cx="40" cy="40" r="24" />
</svg>

</body>
</html>