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>