SVG学习笔记二

1、使用CSS来为SVG图形添加样式

（1）使用属性来添加CSS样式

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

（2）使用style属性

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

（3）使用内联样式表

<svg xmlns="http://www.w3.org/2000/svg">     
    <style type="text/css" >
      <![CDATA[ 
        circle {
           stroke: #006600;
           fill:   #00cc00;
        } 
      ]]>
    </style>     
    <circle  cx="40" cy="40" r="24"/>
</svg>      

（4）class样式

<svg xmlns="http://www.w3.org/2000/svg"> 
    <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>         

（5）使用外部样式表

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

图形的CSS属性

CSS属性 描述
fill 设置图形的填充颜色
fill-opacity 设置图形填充颜色的透明度
fill-rule 设置图形的填充规则
marker 设置这个图形上沿直线（边）使用的marker
marker-start 设置这个图形上沿直线（边）使用的开始marker
marker-mid 设置这个图形上沿直线（边）使用的中间marker
marker-end 设置这个图形上沿直线（边）使用的结束marker
stroke 设置图形的描边颜色
stroke-dasharray 设置使用虚线来对图形进行描边
stroke-dashoffset 设置图形描边虚线的偏移值
stroke-linecap 设置描边线条线头的类型。可选择有round, butt 和 square
stroke-miterlimit 设置描边的斜接限制
stroke-opacity 设置米哦啊吧的透明度
stroke-width 设置描边的宽度
text-rendering 设置描边的text-rendering属性

文本的CSS属性

CSS属性 描述
alignment-baseline 设置文本在x和y坐标系中的对齐方式
baseline-shift 设置文本的基线偏移
dominant-baseline 设置文本的主导基线
glyph-orientation-horizontal 设置水平字形取向
glyph-orientation-vertical 设置垂直字形取向
kerning 设置文本的字距调整

渐变的CSS属性

CSS属性 描述
stop-color 设置渐变中stop元素的停止颜色
stop-opacity 设置渐变中stop元素的停止透明度