Heim > Artikel > Web-Frontend > SVG基础|SVG和CSS联样式表
我们可以使用CSS来为SVG图形添加样式。给SVG图形添加样式就是改变它们的外观,可以修改描边颜色和宽度,填充颜色,透明度等等。
我们可以使用6种方式来为SVG图形添加样式。我们将会在本文介绍这6种方式,文章的最后会给出所有可以在SVG上使用的CSS属性。
SVG图形可以使用的CSS属性和HTML元素可以使用CSS属性稍微有一些不同,但是绝大部分的属性还是相同的。
使用属性来添加CSS样式
我们可以使用一些属性来为SVG图形添加样式,例如stroke和fill属性。下面是一个例子:
<circle stroke="#000000" fill="#00ff00" />
这里有一系列的样式属性可以使用,但是建议使用内联样式表或外部样式表来为SVG图形添加样式。
使用STYLE属性
这个方法不使用属性来添加样式,而是使用style属性,在它里面指定所需要的CSS样式。如果你需要直接在SVG图形中嵌入样式,这个方法可以很好的满足需求。这里的CSS属性和内联级外部CSS样式表中的CSS属性是相同的,你可以直接复制过来使用。
下面是一个使用style属性的例子:
<circle style="stroke: #000000; fill:#00ff00;" />
使用内联样式表
可以使用一个内联样式表为SVG图形添加样式。看下面的例子:
<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>
这种使用内联样式表的工作方式和在HTML元素上使用内联样式表是完全相同的。
内联样式表可以在IE7和Firefox 3.0.5浏览器上正常工作。
CLASS样式
你还可以为每个图形都添加一个class类,使用这个class类来在样式表中作为选择器选择相应的图形。
下面是一个例子,有两个圆形,一个红色一个绿色。分别为它们设置不同的class,并在样式表中使用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>
使用外部样式表
当你在使用外部样式表的时候,样式表是一个单独的文件,这和CSS外部样式表是相同的。你需要使用下面的语法来将外部样式表引入。
<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
上面的代码告诉SVG处理器到什么地方去查找svg-stylesheet.css文件。
下面是一个使用外部样式表的例子,外部样式表的声明被放置在SVG文件中。
<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
在HTML页面中使用STYLE标签
如果你将一个SVG嵌入到一个HTML页面中,你可以在HTML页面中使用style标签来为SVG图形设置样式。例如:
<html> <body> <style> </style> <svg> </svg> </body> </html>
要为SVG图形设置样式,只需要在style标签中添加CSS属性即可。这和在HTML页面中对DOM元素设置样式的方式是完全相同的。下面是一个例子:
<html> <body> <style> circle { stroke: #006600; fill : #00cc00; } </style> <svg> <circle cx="40" cy="40" r="24" /> </svg> </body> </html>
如果你将SVG直接嵌入HTML页面,使用这个方法是最简单直接的方法来为SVG图形添加样式。
样式的优先级
如果你为一个SVG文件设置了内联或外部样式表,同时又设置了SVG内部的局部样式,如果这些样式产生了冲突,那么局部样式会覆盖内联或外部样式表中的样式。
SVG的CSS样式属性
下面是一些你可以在SVG上设置的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元素的停止透明度 |
以上就是SVG基础|SVG和CSS级联样式表的内容,更多相关内容请关注PHP中文网(www.php.cn)!