CSS 设置svg元素样式

2019-6-23 00:09| 作者: admin| 查看: 850| 评论: 0|来自: 蚂蚁部落

svg元素很多样式,不但可以由元素自身的属性设置,也可以通过对应的css属性来设置。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <svg>
    <rect
      x="10" y="10"
      fill="blue"
      width="100" height="100">
    </rect>
  </svg>
</body>
</html>

使用fill属性设置矩形的填充色为蓝色;也可以使用css的对应属性来设置。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
rect {
  fill:blue;
}
</style>
</head>
<body>
  <svg>
    <rect 
      x="10" y="10" 
      width="100" 
      height="100">
    </rect>
  </svg>
</body>
</html>

下面罗列一下常见的与svg元素对应的css属性,具体用法不做介绍,大家自行测试。

一.图形的CSS属性:

下面的属性可以设置path路径或者其他SVG图形元素的相关样式。

对应CSS属性            描述            
fill            设置图形的填充颜色            
fill-opacity            设置图形填充颜色的透明度            
fill-rule            设置图形的填充规则            
marker            设置这个图形上沿直线(边)使用的marker            
marker-start            设置这个图形上沿直线(边)使用的开始marker            
marker-mid            设置这个图形上沿直线(边)使用的中间marker            
marker-end            设置这个图形上沿直线(边)使用的结束marker            
stroke            设置图形的描边颜色            
stroke-dasharray            设置使用虚线来对图形进行描边            
stroke-dashoffset            设置图形描边虚线的偏移值            
stroke-linecap            设置描边线条线头的类型。可选择有round, butt 和 square            
stroke-miterlimit            设置描边的斜接限制            
stroke-opacity            设置描边的透明度            
stroke-width            设置描边的宽度            
text-rendering            设置描边的text-rendering属性            

二.文本的CSS属性:

对应CSS属性            描述            
alignment-baseline设置文本在x和y坐标系中的对齐方式            
baseline-shift            设置文本的基线偏移            
dominant-baseline设置文本的主导基线            
glyph-orientation-horizontal设置水平字形取向            
glyph-orientation-vertical设置垂直字形取向            
kerning    设置文本的字距调整            

三.渐变的CSS属性:

对应CSS属性            描述            
stop-color            设置渐变中stop元素的停止颜色            
stop-opacity            设置渐变中stop元素的停止透明度            

上面简单列举了一下常见的对SVG设置的CSS属性。


鲜花

握手

雷人

路过

鸡蛋
上一篇:SVG <filter> 滤镜

最新评论

返回顶部