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

SVG 文本填充和描边

2018-11-4 00:02| 作者: admin| 查看: 1228| 评论: 0|来自: 蚂蚁部落

SVG也可以给文本进行描边和填充操作。

描边类似于CSS中设置元素边框,而填充则类似于CSS设置元素背景。

下面分别通过代码实例对两个操作做一下介绍。

一.文本描边:

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  font: 4.5em/1 Open Sans, Impact;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100"
    stroke="red">蚂蚁部落</text>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000316ty9fmvo66wqosv6q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码可以将文本的描边颜色设置为红色。

通过绘制文本<text>元素的stroke属性即可实现。

当然还可以将描边设置的更加精细一些,对其进行一些修饰。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  font: 4.5em/1 Open Sans, Impact;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100"
    stroke="red"
    stroke-opacity="0.5" 
    stroke-width="5px">蚂蚁部落</text>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000403ijzxc6j9qz99ljc7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过stroke-opacity和stroke-width分别为描边设置描边透明度和描边粗细。

stroke-opacity属性值介于0-1之间,0表示完全透明,1表示完全不透明。

当然还有其他属性可以对描边进行修饰,比如stroke-dasharray等,这里就不再详细演示。

stroke属性值除了是颜色之外,也可以是渐变对象或者pattern图案。

下面仅以渐变做一下演示:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  font: 5.5em/1 Open Sans, Impact;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <defs>
    <linearGradient id="ant" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>
  <text x="100" y="100"
    fill="blue"
    stroke="url(#ant)"
    stroke-width="5">antzone</text>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000436fg5ppeso2nn3d5g7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,描边是一个线性渐变,描边也可以是pattern图案,这里不再演示。

二.文本填充:

上面介绍了SVG文本的描边效果,下面再介绍一下文本的填充。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  font: 4em/1 Open Sans, Impact;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <text x="100" y="100"
    fill="blue">蚂蚁部落</text>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000514xkujwuujzj92mqv2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过fill属性将文本的填充颜色设置为蓝色。

与描边相同,fill属性值也可以是渐变或者图案,下面以图案为例子进行演示。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  overflow:visible;
  margin:50px;
  font: 5.5em/1 Open Sans, Impact;
}
</style>
</head>
<body>
<svg width="400" height="200">
  <defs>
    <linearGradient id="ant" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="green" />
    </linearGradient>
  </defs>
  <text x="100" y="100"
    fill="url(#ant)"
    stroke="blue"
    stroke-width="5">antzone</text>
</svg>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/04/000546fx2a3fdrgb9az5r9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

将文本的填充设置为一个渐变,也可以使用图案、蒙版和裁切来设置文本填充效果。

相关阅读:

(1).线性渐变可以参阅SVG 线性渐变一章节。

(2).径向渐变可以参阅SVG 径向渐变一章节。

(3).图案可以参阅SVG <pattern>元素用法一章节。

(4).裁切可以参阅SVG <clipPath>一章节。

(5).蒙板可以参阅SVG <mask>蒙板一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部