快捷导航

栏目导航

css设置svg元素的样式

2018-2-4 10:43| 发布者: admin| 查看: 797| 评论: 0|来自: 钱柜手机网页版

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

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<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="" />
<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元素的停止透明度

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-16 16:49 , Processed in 0.737987 second(s), 23 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 钱柜手机网页版

返回顶部