如何绘制交替不同颜色虚线与点的几何图形轮廓线？

下面分几种常用场景给出具体实现方案：

1. SVG 实现 #

SVG是矢量绘图的首选，直接通过双层路径叠加实现效果：

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 灰色虚线轮廓 -->
  <rect x="50" y="50" width="200" height="100" fill="none" stroke="#888" stroke-width="2" stroke-dasharray="10 5"/>
  <!-- 黑色点标记（沿路径间隔分布） -->
  <path d="M50,50 L250,50 L250,150 L50,150 Z" fill="none" stroke="black" stroke-width="4" stroke-dasharray="0 15" stroke-linecap="round"/>
</svg>

核心逻辑：用两条路径分层，第一条做灰色虚线；第二条通过stroke-dasharray="0 15"只显示点（0长度实线+15长度间隔），stroke-linecap="round"让标记变成圆形。

2. CSS + HTML 实现 #

给普通HTML元素添加双层边框效果，通过伪元素实现黑点层：

<div class="shaped-box"></div>

.shaped-box {
  width: 200px;
  height: 100px;
  margin: 50px;
  border: 2px dashed #888;
  position: relative;
}
.shaped-box::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px solid transparent;
  background-image: radial-gradient(circle, black 4px, transparent 4px);
  background-size: 15px 15px;
  pointer-events: none;
}

核心逻辑：外层用灰色虚线边框，伪元素通过径向渐变绘制间隔分布的黑点，覆盖在边框位置。

3. Python Matplotlib 实现 #

数据可视化场景下，通过双层线条叠加实现：

import matplotlib.pyplot as plt
import numpy as np

# 定义矩形顶点坐标
x = [50, 250, 250, 50, 50]
y = [50, 50, 150, 150, 50]

plt.figure(figsize=(6, 4))
# 绘制灰色虚线轮廓
plt.plot(x, y, color='#888', linestyle='--', linewidth=2, dashes=(10, 5))
# 生成轮廓上的间隔点并绘制黑点
edge_points = []
# 遍历每条边生成间隔点
for i in range(4):
    start_x, start_y = x[i], y[i]
    end_x, end_y = x[i+1], y[i+1]
    # 每条边取4个间隔点
    step_x = (end_x - start_x)/5
    step_y = (end_y - start_y)/5
    for j in range(1,5):
        edge_points.append((start_x + step_x*j, start_y + step_y*j))
# 绘制黑点
points_x, points_y = zip(*edge_points)
plt.scatter(points_x, points_y, color='black', s=20)

plt.xlim(0, 300)
plt.ylim(0, 200)
plt.gca().set_aspect('equal', adjustable='box')
plt.show()

核心逻辑：先绘制灰色虚线轮廓，再计算轮廓边上的间隔点，用散点图绘制黑点。

4. Canvas 实现 #

前端动态绘图场景，通过两次路径绘制实现：

<canvas id="shapeCanvas" width="300" height="200"></canvas>

const canvas = document.getElementById('shapeCanvas');
const ctx = canvas.getContext('2d');

// 绘制灰色虚线
ctx.beginPath();
ctx.rect(50, 50, 200, 100);
ctx.strokeStyle = '#888';
ctx.lineWidth = 2;
ctx.setLineDash([10, 5]);
ctx.stroke();

// 绘制黑色点标记
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 4;
ctx.setLineDash([0, 15]);
ctx.lineCap = 'round';
ctx.rect(50, 50, 200, 100);
ctx.stroke();

核心逻辑和SVG一致，两次绘制同一路径，分别设置不同的虚线参数和颜色。

内容的提问来源于stack exchange，提问作者GNMCHLD