×

SVG基础 | SVG和CSS级联样式表

作者:Web前端之家2016.09.20来源:Web前端之家浏览:9672评论:0
关键词:html5SVG
微信公众号

微信公众号

我们可以使用CSS来为SVG图形添加样式。给SVG图形添加样式就是改变它们的外观,可以修改描边颜色和宽度,填充颜色,透明度等等。

600.png

我们可以使用6种方式来为SVG图形添加样式。我们将会在本文介绍这6种方式,文章的最后会给出所有可以在SVG上使用的CSS属性。

SVG图形可以使用的CSS属性和HTML元素可以使用CSS属性稍微有一些不同,但是绝大部分的属性还是相同的。

使用属性来添加CSS样式

我们可以使用一些属性来为SVG图形添加样式,例如strokefill属性。下面是一个例子:

<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>

    <circle  class="myGreen" cx="40" cy="40"  r="24"/>
    <circle  class="myRed"   cx="40" cy="100" r="24"/>
</svg>
使用外部样式表

当你在使用外部样式表的时候,样式表是一个单独的文件,这和CSS外部样式表是相同的。你需要使用下面的语法来将外部样式表引入。

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

上面的代码告诉SVG处理器到什么地方去查找svg-stylesheet.css文件。

下面是一个使用外部样式表的例子,外部样式表的声明被放置在SVG文件中。

<?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页面中使用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属性

下面是<path>元素和其它SVG图形元素的可用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, buttsquare
stroke-miterlimit 设置描边的斜接限制
stroke-opacity 设置米哦啊吧的透明度
stroke-width 设置描边的宽度
text-rendering 设置描边的text-rendering属性
文本的CSS属性
CSS属性 描述
alignment-baseline 设置文本在xy坐标系中的对齐方式
baseline-shift 设置文本的基线偏移
dominant-baseline 设置文本的主导基线
glyph-orientation-horizontal 设置水平字形取向
glyph-orientation-vertical 设置垂直字形取向
kerning 设置文本的字距调整
渐变的CSS属性
CSS属性 描述
stop-color 设置渐变中stop元素的停止颜色
stop-opacity 设置渐变中stop元素的停止透明度
返回SVG教程目录

相关阅读:

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1474300800747.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 土工膜

    资深程序员就是不简单...

  • 大吨位油缸

    谷歌浏览器使用起来很快,没有乱七八糟的插件。www.sdlyxt.com...

  • Web前端之家

    可以加Q群...

  • 访客

    JS点击锚点实现平滑滚动能写一个备注呗,有点看不懂,谢谢...

  • alice

    试用了下,vee-validate挺好用的!...

  • 访客

    封装思路跟原生javascript基本差不多。...

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria