SVG 文字填充和描邊

admin發表於2018-11-04
SVG

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>蒙板一章節。

相關文章