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. How to deal with the problem '<' in OpenERP's view file

    In this case,if you write some stirng in your fields which contains '<' , OpenERP will give a err ...

  2. ASP.NET MVC利用ActionLink实现动态组合查询

    一个文件传输数据表,内有日期.传输协议.传输方向(上传或下载).文件名等信息,完整的表内容显示如下: 现在需要分类查询,即按照协议和传输方向查询.单独的分类查询问题并不大,比如,按协议查询,在View ...

  3. 使用InstallUtil安装及卸载Windows服务的具体操作 Visual Studio 2012版本

    关于Visual Studio 2012中使用InstallUtil对Windows服务进行安装与卸载的文章,在MSDN中的http://msdn.microsoft.com/en-us/librar ...

  4. 之前为dd写的一个小的demo(robotium)

    测试类的编写: package com.m1905.dd.mobile; import com.robotium.solo.By; import com.robotium.solo.Solo; imp ...

  5. java代理-cglib

    前面说到了java的动态代理,但是动态代理依赖于接口,这次来看看cglib来实现的代理... 假设有如下方法,这回没有说接口哦~ package proxy.cglibProxy; public cl ...

  6. java算法----------二叉树的遍历

    二叉树的遍历分为前序.中序.后序和层序遍历四种方式 首先先定义一个二叉树的节点 //二叉树节点 public class BinaryTreeNode { private int data; priv ...

  7. Rechnernetz

    1.Der Aufbau des Internets 1.1 Randabschnitt Er besteht aus Rechner,der mit Internet verbunden ist.D ...

  8. OpenStack Object Storage（Swift）概述

    概述 OpenStack Object Storage(Swift)是OpenStack开源云计算项目的子项目之一,被称为对象存储,提供了强大的扩展性.冗余和持久性. Swift并不是文件系统或者实时 ...

  9. Excel的vlookup函数的用法

    VLOOKUP函数用于搜索指定区域内首列满足条件的元素,确定待检测单元格在区域中的行序号,再进一步返回选定单元格的值. 为了讲解的需要,特制作如图所示的表格.当然,大家也可以根据自己的实际情况设计合适 ...

  10. SQL Server 获取（本周、本月、本旬、本季、本年）的某一天

    /*------------------------------本周----------------------------------------*/ --本周第一天 ),getdate()) -- ...