Highcharts中SVG图案填充未完整显示，出现放大截断问题

开发者阿泽

2026-8-13

问题描述

我使用以下SVG代码生成了一个四角及中心带有特定线条的图案：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
  <g id="Page-1" fill="none" fill-rule="evenodd">
    <g id="Artboard-5" fill="#000000">
      <path id="Combined-Shape" d="M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z"/>
    </g>
  </g>
</svg>

但将该路径应用到Highcharts的图案填充配置时，出现左侧约2/3内容被截断的问题，调整width、height参数后仍无法解决，我的配置代码如下：

const linePattern = "M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z";
const patternOptions :PatternOptionsObject = {
  aspectRatio: 0,
  backgroundColor: "red",
  color: '#907000',
  image: "",
  opacity: 0.5,
  patternTransform: "",
  path: {
    d: linePattern,
    stroke: "white",
    fill: "evenodd"
  },
  width: 30,
  height: 30
}
const patternObject : PatternObject = {
  pattern: patternOptions
};

if (options.series.length) {
  options.series[0].data[0].color = patternObject; // 测试用，修改第一行颜色
}

问题原因

路径属性配置错误：你在path配置中错误地将fill设为"evenodd"，evenodd是填充规则（fill-rule）的合法取值，而非填充颜色（fill）的取值，这会导致渲染逻辑异常，引发显示错位或裁剪。
坐标范围与图案尺寸不匹配：原SVG的路径基于40x40的坐标系设计，但你设置的pattern宽高为30，导致路径中超出30范围的坐标（如x=38.59、40）被图案画布裁剪；同时aspectRatio: 0会强制拉伸图案，进一步加剧显示错位，表现为左侧内容被截断。

解决办法

修正路径填充属性
将path配置中的错误属性调整，把填充规则单独用fillRule设置，同时将fill设为"none"（原SVG仅需要描边，不需要填充）：
```
path: {
  d: linePattern,
  stroke: "white",
  fill: "none",
  fillRule: "evenodd"
}
```

匹配图案尺寸与路径坐标系
将pattern的宽高设为40，与原SVG的viewBox一致，确保所有路径坐标都在图案画布范围内；同时设置aspectRatio: 1保持宽高比，避免拉伸：

const patternOptions :PatternOptionsObject = {
  aspectRatio: 1,
  backgroundColor: "red",
  color: '#907000',
  image: "",
  opacity: 0.5,
  patternTransform: "",
  path: {
    d: linePattern,
    stroke: "white",
    fill: "none",
    fillRule: "evenodd"
  },
  width: 40,
  height: 40
}

可选：缩小路径适配小尺寸图案
如果需要使用30x30的图案，可将原路径所有坐标按30/40=0.75的比例缩小，生成适配的路径数据：

// 按0.75比例缩小后的路径
const scaledLinePattern = "M0 28.9425l2.1225-2.1225 1.0575 1.0575L1.0575 30H0v-1.0575zM0 1.05l2.1225 2.1225 1.0575-1.0575L1.0575 0H0v1.05zM28.9425 30l-2.1225-2.1225 1.0575-1.0575L30 28.9425V30h-1.0575zM30 1.0575l-2.1225 2.1225-1.0575-1.0575L28.9425 0H30v1.0575zM15 13.95l2.1225-2.1225 1.0575 1.0575L16.0575 15l2.1225 2.1225-1.0575 1.0575L15 16.0575l-2.1225 2.1225-1.0575-1.0575L13.9425 15l-2.1225-2.1225 1.0575-1.0575L15 13.9425z";

之后在path.d中使用该缩小后的路径，并保持pattern宽高为30即可。

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