如何绘制基于SVG的二维平面图？附Angular5实现Demo代码

我来帮你梳理下如何实现这类二维房间平面图，咱们从你提供的Demo代码一步步拆解来看：

核心实现思路 #

其实这类平面图的核心就是用SVG的原生图形能力结合Angular的数据绑定特性，实现可复用、可动态调整的可视化效果：

• 靠SVG的viewBox属性适配不同尺寸的画布，用Angular的属性绑定动态控制可视范围
• 把滤镜、填充纹理这类可复用资源放到<defs>里，避免重复代码
• 用SVG的矩形、路径等基础元素来绘制房间的墙体、门、窗和家具

拆解你提供的Demo代码片段 #

先把你的代码片段整理下，方便看结构：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
  <defs>
    <filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
    </filter>
    <pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="..." height="..." patternUnits="userSpaceOnUse">
      <!-- 这里可以放纹理内容，比如重复的小矩形模拟地板砖 -->
    </pattern>
  </defs>
  <!-- 这里可以添加房间的墙体、家具等元素 -->
</svg>

逐部分解释下：

• SVG根元素配置：

  • 必须声明SVG和XLink的命名空间，不然SVG的高级特性（比如滤镜、图案引用）会失效
  • [attr.viewBox]="viewBox"是Angular的属性绑定，你可以在组件类里定义viewBox = "0 0 1000 800"这样的变量，动态调整画布的大小和可视范围
  • preserveAspectRatio="xMidYMid"保证SVG在缩放或者适配不同容器时，保持居中且比例不变

• 里的资源定义：

  • 高斯模糊滤镜#f2：可以给墙体或者家具添加阴影效果，stdDeviation="3"控制模糊的程度，后续只要给元素加上filter="url(#f2)"就能用上这个滤镜
  • 填充图案#New_Pattern_Swatch_1：用来定义重复的纹理，比如地板砖、墙纸，设置好宽度、高度后，给元素的fill属性赋值url(#New_Pattern_Swatch_1)就能把纹理用上

完整实现的关键步骤 #

1. 配置Angular组件类 #

先在组件里定义好视图参数，比如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-room-plan',
  templateUrl: './room-plan.component.html',
  styleUrls: ['./room-plan.component.css']
})
export class RoomPlanComponent {
  // 自定义SVG可视区域，根据你要绘制的房间尺寸调整
  viewBox = "0 0 1000 800";

  // 可选：添加交互方法
  onFurnitureClick(itemName: string) {
    console.log(`你点击了${itemName}`);
    // 这里可以加弹窗展示家具详情、修改属性等逻辑
  }
}

2. 绘制房间主体元素 #

在SVG里添加具体的图形元素，比如房间外框、门、窗、家具：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" [attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
  <defs>
    <filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
    </filter>
    <!-- 定义地板图案 -->
    <pattern id="floorPattern" width="50" height="50" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="50" height="50" fill="#f0e6d6" stroke="#d4b894" stroke-width="1"/>
    </pattern>
  </defs>

  <!-- 房间外框 -->
  <rect x="50" y="50" width="900" height="700" fill="url(#floorPattern)" stroke="#333" stroke-width="4"/>
  <!-- 门 -->
  <rect x="450" y="50" width="100" height="20" fill="#fff" stroke="#333" stroke-width="2"/>
  <!-- 窗户 -->
  <rect x="200" y="150" width="150" height="100" fill="lightblue" stroke="#333" stroke-width="2"/>
  <!-- 床（带点击交互） -->
  <rect x="600" y="300" width="120" height="80" fill="#f5f5f5" stroke="#333" 
        (click)="onFurnitureClick('床')" 
        [style.cursor]="'pointer'"/>
</svg>

3. 可选：添加样式和交互 #

你可以在组件的CSS里添加hover效果，比如给家具添加高亮：

rect[style*="pointer"]:hover {
  fill:#e0e0e0;
  stroke:#666;
}

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