首页 / CSS / SVG基础|SVG和CSS联样式表

SVG基础|SVG和CSS联样式表

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了SVG基础|SVG和CSS联样式表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4141字，纯文字阅读大概需要6分钟。

内容图文



　　我们可以使用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" ?>
<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属性

    　　下面是

    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.gxlcms.com）！

    内容总结

    以上是互联网集市为您收集整理的SVG基础|SVG和CSS联样式表全部内容，希望文章能够帮你解决SVG基础|SVG和CSS联样式表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

    内容备注

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

    内容手机端

    扫描二维码推送至手机访问。

    本文链接：https://qyyshop.com/info/389855.html

    来源：【匿名】