search

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

SVG基础|SVG和CSS联样式表

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



　　我们可以使用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圆形和椭圆形

    Related articles

    See more