styling the SVG images

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

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

 

posted @ 2017-04-27 15:13  世有因果知因求果  阅读(240)  评论(0)  编辑  收藏  举报