SVG大视口地图填充图案统一显示及图例适配问题求助

方法1：切换到patternContentUnits="objectBoundingBox" #

这是最直接的方案，让图案基于被填充元素的边界盒而非全局用户空间缩放，确保图案在任何viewbox下的显示比例一致，图例和地图的图案也能完美匹配。

修改你的pattern定义：

<defs>
  <pattern id="pattern4"
           x="0" y="0" width="0.5" height="0.5"
           patternUnits="objectBoundingBox"
           patternContentUnits="objectBoundingBox">
      <rect x="0" y="0" width="0.5" height="0.5" style="fill: black"/>
  </pattern>
</defs>

• patternUnits="objectBoundingBox"：让pattern的宽高以被填充元素的边界盒为参考（0-1代表元素的100%大小）
• patternContentUnits="objectBoundingBox"：让pattern内部的图形同样基于这个边界盒缩放
• 这里设置pattern宽高为0.5，内部rect宽高为0.5，意味着每个图案单元占元素的50%大小，内部黑色方块占单元的50%，最终显示为元素上25%大小的黑色方块，且不会随viewbox缩放改变相对比例。

方法2：动态计算缩放比例（JavaScript辅助） #

如果需要保留userSpaceOnUse的特性，可以通过JS监听SVG的缩放/resize事件，实时调整pattern的宽高，让图案大小在不同视口下保持一致。

示例代码：

function updatePatternSize() {
  const svg = document.querySelector('#map-svg');
  const pattern = document.querySelector('#pattern4');
  // 计算SVG当前的缩放比例：视口宽度 / viewbox宽度
  const viewBoxParams = svg.getAttribute('viewBox').split(' ');
  const scale = svg.clientWidth / parseFloat(viewBoxParams[2]);
  // 设置图案的目标视觉大小（比如固定显示10px的方块）
  const targetVisualSize = 10;
  const patternSize = targetVisualSize / scale;
  pattern.setAttribute('width', patternSize);
  pattern.setAttribute('height', patternSize);
  // 同步调整内部黑色方块的尺寸
  const rect = pattern.querySelector('rect');
  rect.setAttribute('width', patternSize / 2);
  rect.setAttribute('height', patternSize / 2);
}

// 初始化执行+监听窗口resize
updatePatternSize();
window.addEventListener('resize', updatePatternSize);

这个方法能确保图案在响应式缩放中保持固定的视觉大小，图例可以用同样的逻辑同步更新，或者直接用固定尺寸的SVG元素填充同一个pattern，因为pattern尺寸会动态适配。

方法3：使用CSS变量统一控制图案尺寸 #

结合CSS变量和SVG的style属性，让图案的尺寸依赖于全局变量，这样地图和图例可以共享同一个变量，保证显示一致。

首先定义全局CSS变量：

:root {
  --pattern-unit-size: 20px;
  --pattern-block-size: 10px;
}

然后修改SVG的pattern定义：

<defs>
  <pattern id="pattern4"
           x="0" y="0" 
           width="var(--pattern-unit-size)" height="var(--pattern-unit-size)"
           patternUnits="userSpaceOnUse">
      <rect x="0" y="0" 
            width="var(--pattern-block-size)" height="var(--pattern-block-size)" 
            style="fill: black"/>
  </pattern>
</defs>

接着，给不同viewbox的SVG设置对应的缩放变量，或者通过JS根据viewbox比例动态调整--pattern-unit-size的值，确保视觉上的大小统一。

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