如何在 HTML 中添加可缩放线框

将线框放到 HTML 中最常用的方法是使用 SVG（可缩放矢量图形）。SVG 是一种基于 XML 的图像格式，它可以在浏览器中呈现矢量图形，并且可以随意缩放而不会失真。

以下是一个简单的示例：

创建 SVG 元素：

<svg width='200' height='200'>
  <rect x='50' y='50' width='100' height='100' stroke='black' fill='none'/>
</svg>

在 SVG 元素中绘制线框：

<svg width='200' height='200'>
  <rect x='50' y='50' width='100' height='100' stroke='black' fill='none'/>
  <line x1='50' y1='50' x2='150' y2='150' stroke='black'/>
  <line x1='150' y1='50' x2='50' y2='150' stroke='black'/>
</svg>

在这个示例中，我们在 SVG 元素中绘制了一个正方形和两条对角线。所有元素都具有“stroke”属性，这意味着它们都是线框而不是填充形状。

使用 CSS 样式表将 SVG 元素嵌入到 HTML 中：

<style>
  svg {
    width: 100%;
    height: auto;
  }
</style>
<svg width='200' height='200'>
  <rect x='50' y='50' width='100' height='100' stroke='black' fill='none'/>
  <line x1='50' y1='50' x2='150' y2='150' stroke='black'/>
  <line x1='150' y1='50' x2='50' y2='150' stroke='black'/>
</svg>

在这个示例中，我们使用 CSS 样式表将 SVG 元素的宽度设置为 100％，这样它就可以根据其父元素的大小进行缩放。高度设置为“auto”以保持宽高比。

这就是如何将线框放到 HTML 中并进行缩放的简单方法。使用 SVG 还可以实现更复杂的图形和动画效果。