Plotly生成的SVG Clip Path在Word中的兼容问题及适配咨询

我通过Plotly创建了包含德黑兰市边界等高线的SVG，使用ID为contour1-contourMask的<clipPath>来限制等高线的显示范围，在Chrome和Edge浏览器中显示完全正常，但将SVG导入Word后，clipPath出现严重拉伸，完全忽略了预设的边界框。相关clipPath代码片段如下：

<clipPath id="contour1-contourMask" transform="scale(3.709844559585492,1.9313304721030042)">
  <path
    d="M7.392045660376966,75.60079307692259 6.5906222641516035,... Z"
    fill="white" id="contour1-contourMask_pathElement" />
</clipPath>

针对Word的SVG兼容性问题，可尝试以下调整方案，且不会影响浏览器端的显示效果：

• 将clipPath的transform转移到路径本身：Word对<clipPath>元素上的transform属性支持不佳，但直接修改<path>的坐标会更兼容。可以用Inkscape等SVG编辑工具打开文件，选中路径后应用对应的缩放变换，再导出SVG，此时路径的d属性会直接包含缩放后的坐标，无需在clipPath上保留transform。
• 添加明确的viewBox与尺寸属性：在根<svg>标签中指定viewBox和width/height，比如viewBox="0 0 300 200" width="100%" height="auto"，让Word能准确识别SVG的边界范围，避免自动拉伸。
• 简化变换逻辑：尽量避免在clipPath、路径等元素上叠加复杂变换，优先直接调整路径坐标，减少Word解析时的歧义。
• 逐步排查简化SVG：先移除SVG中无关的元素，只保留clipPath和被裁剪的核心内容，测试是否还存在拉伸问题，逐步定位是否有其他属性干扰了Word的渲染。

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