如何将svg.js创建的SVG元素缩放至父容器尺寸？

当然可以不用每次尺寸变化都重绘所有线条！我们可以利用SVG的viewBox属性配合CSS实现自适应，让SVG自动缩放内容，完全省去手动重绘的麻烦。结合React的场景，我给你整理了具体的实现方案：

核心思路 #

SVG的viewBox属性定义了画布的坐标系统范围，而把SVG元素的宽高设为100%后，它会自动填满父容器，同时浏览器会根据容器尺寸自动缩放viewBox内的所有内容——这意味着你画的线条、图形会跟着容器一起缩放，不用重新绘制。

具体实现步骤 #

1. 初始化SVG时配置viewBox和自适应宽高 #

不再直接给SVG设置固定宽高，而是先获取父容器的初始尺寸，用这个尺寸设置viewBox，同时把SVG的宽高设为100%：

let { offsetWidth: width, offsetHeight: height } = this.whiteboard;
this.draw = SVG('whiteboard')
  .viewbox(0, 0, width, height) // 定义SVG的坐标范围
  .size('100%', '100%'); // 让SVG填满父容器

2. 监听容器尺寸变化（可选） #

如果你的父容器尺寸会动态变化（比如窗口resize、组件布局变化），不用重绘线条，只需要更新viewBox即可。推荐用ResizeObserver来监听容器的尺寸变化，比监听window.resize更精准：

componentDidMount() {
  // 初始化SVG...

  // 监听容器尺寸变化
  this.resizeObserver = new ResizeObserver(entries => {
    const { width, height } = entries[0].contentRect;
    // 只更新viewBox，线条会自动缩放
    this.draw.viewbox(0, 0, width, height);
  });
  this.resizeObserver.observe(this.whiteboard);
}

componentWillUnmount() {
  // 清理监听，避免内存泄漏
  this.resizeObserver.disconnect();
}

3. 注意事项 #

• 确保父容器#whiteboard有明确的尺寸参考（比如通过CSS设置width: 100%; height: 80vh，或者它的父元素有固定尺寸），否则SVG的100%宽高会没有依据。
• 如果你需要保持图形的比例不变，可以给SVG添加preserveAspectRatio属性，默认值xMidYMid meet会保持比例并适配容器；如果想让图形拉伸填满容器，可设为preserveAspectRatio="none"。
• 你之前绘制的线条代码完全不用修改，因为viewBox会自动把绘制坐标映射到容器的实际尺寸。比如你画的line(0,0, width, height)会始终是容器的对角线，不管容器怎么变。

完整React组件示例 #

import React, { Component } from 'react';
import SVG from '@svgdotjs/svg.js';

class Whiteboard extends Component {
  constructor(props) {
    super(props);
    this.whiteboard = null;
    this.draw = null;
    this.resizeObserver = null;
  }

  componentDidMount() {
    const { offsetWidth: width, offsetHeight: height } = this.whiteboard;
    // 初始化自适应SVG
    this.draw = SVG(this.whiteboard)
      .viewbox(0, 0, width, height)
      .size('100%', '100%');

    // 绘制示例线条
    this.draw.line(0, 0, width, height).stroke({ width: 2, color: 'red' });
    this.draw.line(width, 0, 0, height).stroke({ width: 2, color: 'blue' });

    // 监听容器尺寸变化
    this.resizeObserver = new ResizeObserver(entries => {
      const { width, height } = entries[0].contentRect;
      this.draw.viewbox(0, 0, width, height);
    });
    this.resizeObserver.observe(this.whiteboard);
  }

  componentWillUnmount() {
    this.resizeObserver?.disconnect();
    this.draw?.remove();
  }

  render() {
    return (
      <div
        ref={r => this.whiteboard = r}
        id="whiteboard"
        style={{ width: '100%', height: '80vh', border: '1px solid #ccc' }}
      />
    );
  }
}

export default Whiteboard;

这样调整后，你的白板就能自动适配父容器大小，不用再每次resize都重绘所有线条啦！

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