使用路径的 SVG 上的肯尼亚地图的代码

如果您正在开发一个网站或应用程序，并需要在其中展示肯尼亚地图，SVG （可缩放矢量图形）是一个非常好的选择。 使用SVG，您可以轻松地显示肯尼亚地图和其它国家地图，并且可以对它们进行自定义。

在本文中，我们将演示如何在 SVG 上使用路径以显示肯尼亚地图。

步骤 1: 准备 SVG

首先，我们需要准备一个 SVG 图形。 我们可以在代码中使用 <svg> 标签来创建 SVG。以下是一个示例：

<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" >
  <path id="kenya" d="M 219 454 L 219 440 L 224 432 L 214 420 L 219 407 L 211 402 L 214 395 L 202 396 L 192 384 L 178 384 L 177 387 L 165 385 L 160 377 L 138 371 L 134 366 L 139 358 L 145 357 L 142 352 L 132 350 L 125 341 L 117 358 L 120 361 L 115 369 L 117 377 L 127 381 L 126 387 L 114 388 L 102 381 L 105 377 L 95 374 L 100 365 L 90 356 L 97 354 L 86 346 L 89 336 L 78 341 L 75 335 L 67 340 L 77 347 L 69 352 L 58 352 L 54 358 L 40 363 L 43 368 L 39 372 L 48 383 L 44 391 L 47 402 L 36 402 L 24 405 L 24 412 L 19 411 L 17 420 L 5 420 L -1 423 L 13 431 L 13 438 L 22 452 L 27 453 L 22 462 L 28 464 L 33 462 L 35 470 L 41 468 L 42 475 L 51 475 L 50 492 L 65 494 L 64 500 L 72 505 L 72 512 L 77 512 L 86 508 L 89 518 L 104 514 L 111 515 L 117 511 L 120 516 L 135 511 L 144 512 L 142 506 L 157 504 L 157 500 L 163 495 L 171 504 L 179 504 L 184 510 L 195 510 L 211 495 L 211 485 L 226 469 L 226 458 L 219 454 L" />
</svg>

假设您在自己的项目中使用这个地图，可以根据需要更改SVG的宽度，高度，查看箱和路径的位置。

在这个例子中，我们创建了一个SVG，宽度为800，高度为600，我们将其放置在 viewbox 中，左上角为（0,0），右下角为（800,600）。 我们还在其中定义了一个名为“肯尼亚”的路径。

SVG 的路径数据以字符串的形式呈现在 d 属性中。 路径的每个点都用大写字母M（或m）表示。它表示路径的起始点。 路径数据之后的每个点都用 L（或l）表示。 这表示直线应从前一个点到下一个点。

注意路径数据中的坐标应该与 viewBox 中的坐标相同。

步骤 2: 在页面中引用 SVG

现在，我们需要将 SVG 嵌入到我们的网页中。 可以通过各种方式实现此目的，本文不会细讲。 在此处，我们假设我们将 SVG 嵌入到 HTML 中。

<div class="map">
  <svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" >
    <path id="kenya" d="M 219 454 L 219 440 L 224 432 L 214 420 L 219 407 L 211 402 L 214 395 L 202 396 L 192 384 L 178 384 L 177 387 L 165 385 L 160 377 L 138 371 L 134 366 L 139 358 L 145 357 L 142 352 L 132 350 L 125 341 L 117 358 L 120 361 L 115 369 L 117 377 L 127 381 L 126 387 L 114 388 L 102 381 L 105 377 L 95 374 L 100 365 L 90 356 L 97 354 L 86 346 L 89 336 L 78 341 L 75 335 L 67 340 L 77 347 L 69 352 L 58 352 L 54 358 L 40 363 L 43 368 L 39 372 L 48 383 L 44 391 L 47 402 L 36 402 L 24 405 L 24 412 L 19 411 L 17 420 L 5 420 L -1 423 L 13 431 L 13 438 L 22 452 L 27 453 L 22 462 L 28 464 L 33 462 L 35 470 L 41 468 L 42 475 L 51 475 L 50 492 L 65 494 L 64 500 L 72 505 L 72 512 L 77 512 L 86 508 L 89 518 L 104 514 L 111 515 L 117 511 L 120 516 L 135 511 L 144 512 L 142 506 L 157 504 L 157 500 L 163 495 L 171 504 L 179 504 L 184 510 L 195 510 L 211 495 L 211 485 L 226 469 L 226 458 L 219 454 L" />
  </svg>
</div>

在代码中，我们在一个名为“ map”的 div 元素中嵌入 SVG。

步骤 3: 自定义 SVG 样式

现在，我们已经将 SVG 添加到我们的HTML中，让我们使用 CSS 来定义它的样式。

.map {
  display: inline-block;
  position: relative;
  width: 800px;
  height: 600px;
  background-color: #f8f8f8;
}

#kenya {
  fill: #6c757d;
  stroke: #fff;
  stroke-width: 1px;
}

这里我们为“ map”元素设置了位置，宽度，高度和背景颜色。 我们还为“肯尼亚”路径定义了填充色和轮廓。

现在，我们的 SVG 地图已经准备好了！

结论

我们演示了如何在 SVG 上使用路径以显示肯尼亚地图。 在您的项目中，您可以根据相应的需求自定义 SVG 样式。