SVG不像canvas，SVG的所有元素都是以DOM元素存在于文档中的，我们可以像给任何普通的dom元素添加css样式一样，可以对svg的元素做styling.不过SVG元素的css样式名称和普通html元素的css样式属性名称还是有所区别的。下面给出一个完整的列表供参考

CSS Property Description
fill Sets fill color of the shape.
fill-opacity Sets fill opacity of the shape.
fill-rule Sets fill rule of the shape.
marker Sets marker used along the lines (edges) of this shape.
marker-start Sets start marker used along the lines (edges) of this shape.
marker-mid Sets mid marker used along the lines (edges) of this shape.
marker-end Sets end marker used along the lines (edges) of this shape.
stroke Sets the stroke (line) color used to draw the outline of this shape.
stroke-dasharray Sets the stroke (line) dashing used to draw the outline of this shape.
stroke-dashoffset Sets the stroke (line) dash offset used to draw the outline of this shape.
stroke-linecap Sets the stroke (line) line cap used to draw the outline of this shape. Valid values are round, butt and square.
stroke-miterlimit Sets the stroke (line) miter limit used to draw the outline of this shape.
stroke-opacity Sets the stroke (line) opacity used to draw the outline of this shape.
stroke-width Sets the stroke (line) width used to draw the outline of this shape.
text-rendering Sets the text-rendering used to draw the outline of this shape.

text元素拥有的css属性

CSS Property Description
alignment-baseline Sets how the text is aligned to its x and y coordinates.
baseline-shift Sets the baseline shift used to render text.
dominant-baseline Sets the dominant baseline.
glyph-orientation-horizontal Sets horizontal glyph orientation.
glyph-orientation-vertical Sets vertical glyph orientation.
kerning Sets the kerning of the rendered text (kern

给SVG元素配置css样式的几种方式:

使用svg属性直接在svg元素中定义:

<circle stroke="#000000" fill="#00ff00" />

使用style属性中定义css样式的方式:

<circle style="stroke: #000000; fill:#00ff00;" />

使用inline stylesheets

<svg xmlns="http://www.w3.org/2000/svg"

    xmlns:xlink="http://www.w3.org/1999/xlink">

    <style type="text/css" >

      <![CDATA[

        circle {

           stroke: #006600;

           fill:   #00cc00;

        }

      ]]>

    </style>

    <circle  cx="40" cy="40" r="24"/>

</svg>

或者

<svg xmlns="http://www.w3.org/2000/svg"

    xmlns:xlink="http://www.w3.org/1999/xlink">

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

使用外部文件方式(注意存在兼容性问题，貌似firefox 3是不工作的)

<?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文档中定义和使用css样式

<html>

<body>

<style>

  circle {

     stroke: #006600;

     fill  : #00cc00;

  }

</style>

<svg>

  <circle cx="40" cy="40" r="24" />

</svg>

</body>

</html>

styling the SVG images的更多相关文章

  1. 推荐15款制作 SVG 动画的 JavaScript 库

    在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...

  2. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  3. 【转】Styling And Animating SVGs With CSS

    原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...

  4. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  5. 【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...

  6. HTML页面中嵌入SVG

    HTML页面中嵌入SVG的几种方式 你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...

  7. W3C推进SVG规范Ver1.1（中文译稿）—Part I

    转自:http://www.gispark.com/html/GISarticle/2006/1215/826.html Scalable Vector Graphics (SVG) 1.1 Spec ...

  8. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  9. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

随机推荐

  1. Ubuntu 下 unzip用法

    unzip [参数] <压缩文件> 参数: -P <密码> zip 压缩包的密码-f 覆盖原有文件-d <路径> 指定解压路径-n 解压缩时不覆盖原有文件-o 不经 ...

  2. python_SMTP and POP3

    #!/usr/bin/python #coding=utf-8 #发送邮件 import smtplib from smtplib import SMTP as smtp import getpass ...

  3. fgets()函数读取键盘，去掉换行符或丢弃多余的字符

    在上一遍随笔中,我们知道可以用fgets()函数来代替不安全的gets()函数.fgets函数中的第二个参数限制了读取的个数. 上篇文章也提到,fgets是会读取回车换行符的.有时候我们并不希望在字符 ...

  4. Examples of GoF Design Patterns--摘录

    http://stackoverflow.com/questions/1673841/examples-of-gof-design-patterns You can find an overview ...

  5. 关于rails中 rake db:create 失败的问题

    提示信息: rake aborted!Could not find a JavaScript runtime. See https://github.com/sstephenson/execjsfor ...

  6. 使用 Python 编写脚本并发布

    使用 Python 编写脚本并发布 P1: 脚本 通常在 Linux 服务器上会遇到在命令行中输入命令的操作,而有些操作包含的命令数目较多或者其中的命令包含的参数较多,如果一个一个的敲命令的话就太麻烦 ...

  7. CC2530zigbee技术-简介协议栈

    前言 说实话,我喜欢自己的原创,虽然我写得可能简单了,但我觉得自己在写博客的路途上,一点一点地积累知识,我也借鉴别人的东西,特别是在写这篇文章时所使用的是markdownpad2写的,原来我根本就不知 ...

  8. Django url分发到工程里

    因为我们建立了Django后 ,url是在mysite下的全局对象 因为我们实际项目里不可能只有一个工程 而全放在全局里去分发url 会让代码耦合度提高,代码量大后会造成维护困难.这时候我们把url分 ...

  9. C# 扩展方法一

    1. 何为扩展方法 扩展方法是C#3.0引入的语法特性,是一种特殊的静态方法.它使得我们能向现有的数据类型“动态”添加方法,而不需要创建行的派生类型.重新编译或直接修改原始类型的源代码. 注意扩展方法 ...

  10. C# 空合并运算符 ??

    C#语言中,??运算符称为空合并运算符: a??b形式的空合并表达式要求a为可以为null的类型或引用类型.如果a为非null,则a??b的结果为a:否则,结果为b.仅当a为null时,该操作才计算b ...