如何制作一端始终贴合瞄准器指定部位且屏幕尺寸变化时效果不变的斜线

核心逻辑是把斜线的固定端锚点和瞄准器容器做坐标绑定，避免用固定像素单位，就可以实现任意屏幕尺寸下的贴合效果，以下是3种常用实现方式：

方案1：CSS 伪元素实现（轻量简单场景首选） #

适用于只有1-2条斜线、不需要复杂形状的场景：

• 给瞄准器外层容器设置position: relative，尺寸用相对单位（vw/vh、百分比均可）保证自适应
• 用伪元素绘制斜线，将transform-origin设置为需要贴合瞄准器的端点，再把该端点的坐标和瞄准器的目标位置绑定即可
  示例代码：

/* 瞄准器外层容器 */
.sight {
  position: relative;
  width: 8vw;
  height: 8vw;
  border: 2px solid #f00;
  border-radius: 50%;
}
/* 右上角45度斜线 */
.sight::after {
  content: "";
  position: absolute;
  /* 锚点对齐瞄准器右上角 */
  right: 0;
  top: 0;
  width: 25vw;
  height: 2px;
  background: #f00;
  /* 变换原点设为斜线左端点，也就是贴合瞄准器的端点 */
  transform-origin: left center;
  transform: rotate(-45deg);
}

方案2：SVG 实现（多斜线/复杂图形场景首选） #

适用于有多个方向斜线、或者需要和其他瞄准器图形组合的场景，自适应能力最强：

• 所有元素放在同一个SVG标签内，通过viewBox定义内部坐标体系，SVG本身设为宽100%自适应外层容器
• 斜线的固定端坐标直接在viewBox体系内写死即可，SVG自动等比例缩放时坐标不会偏移
  示例代码：

<svg viewBox="0 0 200 200" style="width: 100%;height:auto;">
  <!-- 瞄准器中心圆 -->
  <circle cx="100" cy="100" r="8" stroke="#f00" stroke-width="2" fill="none"/>
  <!-- 四条斜线起点全部固定在瞄准器圆的边缘 -->
  <line x1="94" y1="94" x2="0" y2="0" stroke="#f00" stroke-width="2"/>
  <line x1="106" y1="94" x2="200" y2="0" stroke="#f00" stroke-width="2"/>
  <line x1="94" y1="106" x2="0" y2="200" stroke="#f00" stroke-width="2"/>
  <line x1="106" y1="106" x2="200" y2="200" stroke="#f00" stroke-width="2"/>
</svg>

方案3：Canvas 实现（动态交互场景首选） #

适用于瞄准器需要跟随鼠标移动、斜线长度/角度需要实时变化的场景：

• 窗口尺寸变化时监听resize事件，先更新瞄准器的中心坐标，再以该坐标为起点绘制斜线即可
  示例核心逻辑：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
// 窗口resize时重设canvas尺寸
function resize() {
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  draw()
}
function draw() {
  // 瞄准器坐标固定在屏幕中心
  const sightX = canvas.width / 2
  const sightY = canvas.height / 2
  // 绘制瞄准器
  ctx.beginPath()
  ctx.arc(sightX, sightY, 8, 0, Math.PI * 2)
  ctx.strokeStyle = '#f00'
  ctx.stroke()
  // 绘制斜线，起点固定为瞄准器中心
  ctx.beginPath()
  ctx.moveTo(sightX, sightY)
  ctx.lineTo(sightX + 200, sightY - 200)
  ctx.stroke()
}
window.addEventListener('resize', resize)
resize()

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