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. Java集合类中的Iterator和ListIterator的区别

    注意:内容来自网络他人文章! 最近看到集合类,知道凡是实现了Collection接口的集合类,都有一个Iterator方法,用于返回一个实现了Iterator接口的对象,用于遍历集合:(Iterato ...

  2. hibernate的AnnotationHelloWorld

    来龙去脉: 最开始sun这个土鳖设计了EJB2.0.EJB2.1那个时代.后来有人发现设计的很烂,不好用,就设计了hibernate,,人们发现用hibernate反而比EJB2.0.2.1好,hib ...

  3. 查看tomcat部署的项目名

    Myeclips的查看方法 项目名右键-->properties-->Myeclips-->deployment 这里虽然可以改这个路径的项目名 但是一般不建议更改 避免出现未知错误 ...

  4. ubuntu 16.04通过源码方式安装nginx

    1.下载nginx源码包 wget  http://nginx.org/download/nginx-1.11.12.tar.gz 2.解压该tar包 tar zxvf nginx-1.11.12.t ...

  5. 运行零币Zcash（ZEC）

    1.在基于 Ubuntu 或者 Debian 的系统中: $ sudo apt-get install \build-essential pkg-config libc6-dev m4 g++-mul ...

  6. Android序列化：Parcelable/Serializable

    1.易用性及速度 1.1 Serializable——简单易用 Serializable的作用是为了保存对象的属性到本地文件.数据库.网络流.rmi以方便数据传输,当然这种传输可以是程序内的也可以是两 ...

  7. 使用github oauth 出现 OpenSSL::SSL::SSLError - SSL_connect SYSCALL returned=5 errno=0 state=SSLv2/v3 解决

    A top level initializer is highly recommended to use: conf/initializer/tls_settings.rb OpenSSL::SSL: ...

  8. mongodb-脏数据问题

    采用多线程后, 发现最大的问题是redis和mongodb的脏数据问题 1, upsert 的脏数据问题 多线程对同一个collect进行upsert操作时, 会引发并发脏数据问题, 最开始的解决方案 ...

  9. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  10. jsonp/ajax 自己的一些总结

    data.json代码:[{"name": "张三", "age": 18}, {"name": "李四&qu ...