时间戳

首页 > 解决方案 > SVG将线转换为矩形

svg - SVG将线转换为矩形

问题描述

我如何通过专门保留有关线的起点和终点的信息将线转换为矩形。例如，通过旋转或倾斜矩形，我将得到一个与线具有相同长度和相同方向的矩形。

标签： svgrotationrect

解决方案

lineToPath使用线条的起点和终点以及笔划宽度将 SVG 转换<line>为闭合：<path>

const lineToPath = ({x1,y1,x2,y2,width}) => {
  const angle = Math.atan((y2 - y1) / (x2 - x1));
  const dx = width / 2 * -Math.sin(angle);
  const dy = width / 2 * Math.cos(angle);
  
  return `M ${x1 + dx},${y1 + dy} L ${x2 + dx},${y2 + dy} 
    L ${x2 - dx},${y2 - dy} L ${x1 - dx},${y1 - dy} Z`;
}

const line = d3.select('line');
const x1 = parseFloat(line.attr('x1'));
const x2 = parseFloat(line.attr('x2'));
const y1 = parseFloat(line.attr('y1'));
const y2 = parseFloat(line.attr('y2'));
const width = parseFloat(line.attr('stroke-width'));

const linePath = lineToPath({x1,y1,x2,y2,width});
d3.select('path').attr('d', linePath);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <line x1="10" y1="90" x2="220" y2="30" stroke="yellow" stroke-width="30" />
  <path stroke="red" fill="none" />
</svg>

推荐阅读