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. OpenERP button 的三种类型

    1. workflow: 默认是这种类型,如果你需要创建工作流类型的button使用这个 2. object: 调用function的类型,如果你需要调用py文件中同名的方法,使用该类型. 3.act ...

  2. vue遇见better-scroll

    better-scroll better-scroll 是一款重点解决移动端(现已支持 PC 端)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscr ...

  3. 深度学习（十三） R-CNN Fast RCNN

    object detection我的理解,就是在给定的图片中精确找到物体所在位置,并标注出物体的类别.object detection要解决的问题就是物体在哪里,是什么这整个流程的问题.然而,这个问题 ...

  4. json test

    public static void main(String[] args) { class B { String name; public String getName() { return nam ...

  5. 08 Java 集合的线程安全问题

    1 Java中的集合 Java中的集合分为同步的集合(线程安全)和线程不安全的集合 例如 : ArrayList和Vector的区别: 一.同步性:Vector是线程安全的,也就是说是同步的,而Arr ...

  6. jQuery插件开发之windowScroll

    回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也得向前迈进. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑, ...

  7. Datenstruktur und Algorithmus

    In der Informatik und Softwaretechnik ist eine Datenstruktur ein Objekt zur Speicherung und Organisa ...

  8. [转]HTTP Error 502.5 - Process Failure asp.net core error in IIS

    本文转自:http://www.cnblogs.com/autohome7390/p/6840652.html 在windows server 2012 上安装完dotnet-win-x64.1.1. ...

  9. DataGridView 绑定数据方法

    DataGridView控件用于显示来自多种外部数据源中的数据,用户可以在此控件添加行和列,并可以填充数据.   如要让DataGridView显示数据库中的数据,只需要将此控件绑定到挑用数据库的数据 ...

  10. WCF WCF的宿主

    一.WCF服务应用程序与WCF服务库 我们在平时开发的过程中常用的项目类型有“WCF 服务应用程序”和“WCF服务库”. WCF服务应用程序,是一个可以执行的程序,它有独立的进程,WCF服务类契约的定 ...