Single Family Home Floor Plan

The viewBox Coordinate System

SVG uses a viewBox attribute to define a virtual coordinate system independent of the rendered size. This floor plan declares viewBox="0 0 1200 800", meaning the internal coordinate space spans 1200 units wide by 800 units tall. The browser then scales this space to fit the container, preserving aspect ratio automatically.

This approach lets us define room positions in absolute units (pixels in SVG space) while the rendered output scales responsively to any screen size. A room at x="600" y="50" always sits at the same relative position regardless of display resolution.

Room Groups and Data Attributes

Each room is wrapped in an SVG <g> (group) element with class="room" and custom data-room / data-area attributes. Grouping the rectangle, labels, and dimension text together means a single click handler on the group captures interactions for all child elements. The data attributes store metadata that JavaScript reads on click without needing to parse visual content.

Click and Hover Handling

CSS :hover pseudo-classes handle visual feedback (border highlight, fill opacity changes) with no JavaScript needed. Click events use event.stopPropagation() so clicking a room does not also trigger the SVG-level click handler that deselects rooms. Text elements use pointer-events: none so clicks pass through labels to the underlying shape.

SVG Room Definition

<g class="room" data-room="Living Room" data-area="450">
  <rect x="600" y="50"
        width="550" height="300"
        fill="#e8f4f8"
        stroke="#2c3e50" stroke-width="2"
        class="room-shape"/>
  <text x="875" y="190"
        class="room-label">Living Room</text>
  <text x="875" y="210"
        class="room-area">450 sq ft</text>
</g>

JavaScript Interaction Pattern

const rooms = document.querySelectorAll('.room');

rooms.forEach((room, index) => {
  // Hover: soft tick with pitch variation
  room.addEventListener('mouseenter', () => {
    SoundEngine.tick(400 + index * 30, 0.06);
  });

  // Click: show room details
  room.addEventListener('click', function(e) {
    e.stopPropagation();
    SoundEngine.click();

    const name = this.dataset.room;
    const area = this.dataset.area;
    showRoomDetails(name, area);

    // Highlight selected room
    rooms.forEach(r => r.classList.remove('highlighted'));
    this.classList.add('highlighted');
  });
});

Computing Room Centers

function getRoomCenter(roomEl) {
  const rect = roomEl.querySelector('.room-shape');
  const x = parseFloat(rect.getAttribute('x'));
  const y = parseFloat(rect.getAttribute('y'));
  const w = parseFloat(rect.getAttribute('width'));
  const h = parseFloat(rect.getAttribute('height'));
  return { x: x + w / 2, y: y + h / 2 };
}

ARIA Roles for Interactive SVGs

Interactive SVGs should use role="img" on the root <svg> element with an aria-label describing the overall graphic. Each interactive room group benefits from role="button" and aria-label attributes so screen readers announce them as clickable elements with meaningful names like "Living Room, 450 square feet."

A <title> element inside each <g> group provides a tooltip and accessible name. The <desc> element can add a longer description for complex rooms.

Keyboard Navigation

SVG group elements are not focusable by default. Adding tabindex="0" to each .room group lets users Tab between rooms. A keydown listener for Enter and Space triggers the same action as a click. Focus styles should mirror hover styles so keyboard users see the same visual feedback.

rooms.forEach(room => {
  room.setAttribute('tabindex', '0');
  room.setAttribute('role', 'button');
  room.setAttribute('aria-label',
    room.dataset.room + ', ' +
    room.dataset.area + ' square feet');

  room.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      room.click();
    }
  });
});

Reduced Motion

The walk-through tour animation and pulse highlights respect the prefers-reduced-motion media query. When reduced motion is preferred, the tour advances instantly without animated path tracing, and the pulse animation on highlighted rooms is disabled. This ensures users with vestibular disorders can still access all functionality.