将SVG路径的填充图案缩放至路径自身尺寸

嘿，我来帮你搞定这个SVG图案填充的问题！你需要让1000×500的图片图案自适应不同尺寸的路径，还得在缩放后尺寸不足时自动重复，下面分两种方案给你讲解：

一、纯SVG方案（适合固定比例场景） #

如果你的路径比例比较统一，可以直接通过<pattern>的属性配置实现：

<?xml version="1.0" encoding="UTF-8"?> <!-- 建议把原UTF-16改成UTF-8，避免编码问题 -->
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
  <!-- 定义自适应图案 -->
  <pattern id="imgPattern"
           patternUnits="objectBoundingBox" <!-- 让图案绑定到路径的边界框 -->
           width="1" height="0.75" <!-- 这里的0.75是图片缩放后的高度/目标路径高度，根据你的场景调整 -->
           viewBox="0 0 1000 500" <!-- 对应你的图片原始尺寸 -->
           preserveAspectRatio="xMinYMin meet"> <!-- 保持图片比例，适配图案容器 -->
    <!-- 替换成你的图片路径 -->
    <image href="your-image.jpg" width="1000" height="500" />
  </pattern>

  <!-- 示例路径：不同尺寸的图形 -->
  <rect x="50" y="50" width="300" height="200" fill="url(#imgPattern)" />
  <rect x="400" y="50" width="200" height="300" fill="url(#imgPattern)" />
  <path d="M50,300 L200,350 L150,450 L50,400 Z" fill="url(#imgPattern)" />
</svg>

属性说明： #

• patternUnits="objectBoundingBox"：让图案的坐标系与目标路径的边界框绑定，width="1"和height="1"表示图案容器大小等于路径尺寸
• viewBox="0 0 1000 500"：告诉SVG图案内容的原始尺寸，保证缩放时比例正确
• preserveAspectRatio="xMinYMin meet"：保持图片宽高比，缩放至刚好能放进图案容器，空白区域会自动重复图案填充

二、JavaScript动态适配方案（适合尺寸完全不固定的场景） #

如果你的路径尺寸五花八门，纯SVG没法通用适配，就用JS动态计算每个路径的边界框，自动调整图案参数：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
  <!-- 基础图案模板 -->
  <pattern id="patternTemplate"
           patternUnits="objectBoundingBox"
           viewBox="0 0 1000 500"
           preserveAspectRatio="xMinYMin meet">
    <image href="your-image.jpg" width="1000" height="500" />
  </pattern>

  <!-- 需要填充的路径，统一加class标识 -->
  <rect x="50" y="50" width="300" height="200" class="pattern-target" />
  <rect x="400" y="50" width="200" height="300" class="pattern-target" />
  <path d="M50,300 L200,350 L150,450 L50,400 Z" class="pattern-target" />

  <script type="text/javascript">
    // 图片原始尺寸
    const imgWidth = 1000;
    const imgHeight = 500;
    const imgRatio = imgWidth / imgHeight;

    // 遍历所有需要填充的元素
    document.querySelectorAll('.pattern-target').forEach(el => {
      // 获取路径的边界框尺寸
      const bbox = el.getBBox();
      const pathRatio = bbox.width / bbox.height;

      // 计算图案容器的比例：适配路径的宽或高，保证图片比例不变
      let patternW, patternH;
      if (pathRatio > imgRatio) {
        // 路径更宽，按宽度适配，计算高度比例
        patternW = 1;
        patternH = (bbox.width / imgRatio) / bbox.height;
      } else {
        // 路径更高，按高度适配，计算宽度比例
        patternH = 1;
        patternW = (bbox.height * imgRatio) / bbox.width;
      }

      // 复制模板并修改参数，避免多个路径互相影响
      const newPattern = document.getElementById('patternTemplate').cloneNode(true);
      newPattern.id = `dynamic-pattern-${Math.random()}`;
      newPattern.setAttribute('width', patternW);
      newPattern.setAttribute('height', patternH);
      document.querySelector('svg').appendChild(newPattern);

      // 给路径设置填充
      el.setAttribute('fill', `url(#${newPattern.id})`);
    });
  </script>
</svg>

这个方案的优势： #

• 自动适配任意尺寸、任意形状的路径
• 始终保持图片的原始宽高比
• 缩放后如果路径某一维度超过图案尺寸，会自动重复填充铺满整个路径

注意事项： #

• 编码问题：把原XML声明的UTF-16改成UTF-8，避免出现乱码或加载异常
• 图片路径：确保图片和SVG在同一目录，或者使用正确的相对/绝对路径；如果是跨域图片，需要配置CORS权限
• 不规则路径：getBBox()能正确获取任意路径的边界框，所以不规则图形也能完美适配

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