Home > Article > Web Front-end > SVG基础|SVG和CSS联样式表

SVG基础|SVG和CSS联样式表

PHP中文网Original: 2016-05-17 09:07:352294browse

　　我们可以使用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）！

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 CANVAS：绘制阴影和填充模式Next article：SVG基础|绘制SVG圆形和椭圆形

See more

SVG基础|SVG和CSS联样式表

Related articles