您的位置:首页> HTML5教程> SVG教程

SVG 填充、描边和透明度设置

2019-4-25 18:12| 作者: admin| 查看: 1472| 评论: 0|来自: 蚂蚁部落

本章节通过代码实例介绍一下如何实现SVG图形的填充、描边和透明度设置。

非常简单的操作,可以类比于CSS设置元素的背景、边框和透明度的操作。

最为熟悉的填充或者描边操作都是对颜色的设置,其实也可以设置渐变或者图案等。

本文为了简便,只以设置颜色为例子进行演示,更多内容可以参阅如下几篇文章:

(1).SVG <pattern> 图案模式一章节。

(2).SVG <linearGradient> 线性渐变一章节。

(3).SVG <radialGradient>径向渐变一章节。

下面进入正题,分别通过代码实例介绍一下标题中提到的三个操作。

一.SVG 填充操作:

填充操作可以类比CSS设置元素背景颜色,非常的简单。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg测试</title>
<style type="text/css">
svg {
  width:300px;
  height:300px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle
    cx="120" cy="120"
    r="80"
    fill="red"/>
</svg>
</body>
</html>

上述代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/25/181330ulblzlbr9dmwbbrw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码将绘制的圆形,填充为红色,非常简单的操作。

使用fill属性即可实现,文章的开头已经介绍过,作为填充的内容没必要都是颜色。

也可以是渐变或者图案等,本文就不再演示,上面对应的文章中应该有介绍。

上述代码中,颜色值是关键字形式,当然也可以是其他格式的颜色值,比如RGB或者十六进制。

只要CSS中合法的颜色值,在SVG中都是合法的,具体参阅CSS 颜色值类型一章节。

SVG填充与canvas类似,也需要遵守相应的填充规则,具体参阅canvas 非零绕组规则与奇偶规则一章节。

二.SVG描边:

描边可以类比于CSS设置元素边框,看如下代码实例:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/25/181406borlv8z8nbsrn1vn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码简单分析如下:

(1).stroke属性用于设置元素的描边颜色,也就是边框颜色。

(2).stroke-width属性用于设置元素描边的宽度,也就是边框的宽度。

三.SVG透明度:

SVG的透明度可以类比于CSS设置元素的透明度。

设置透明度可以分为两个部分,设置描边的透明度和设置元素的透明度。

设置描边透明度可以使用stroke-opacity属性,设置元素透明度可以使用fill-opacity属性。

代码实例如下:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/25/181432d26sm2a2aq818qds.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的代码分别通过对应的属性设置了描边和填充的透明度。

可以看到上述图片中,边框和内容有部分区域重合了,具体原理参阅SVG绘制1px直线模糊一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部