Word 应用程序中的 SVG 剪辑路径兼容性问题

Question

我正在使用剪辑路径（id：contour1-contourMask）在Plotly创建的轮廓SVG上定义德黑兰市的边界。代码如下：https://codepen.io/mojtaba_codepen/pen/abeKJRX 虽然它在 Chrome 和 Edge 中正确显示，但剪辑路径看起来被拉伸并忽略了 Word 中的边界框。

有人遇到过类似的问题吗？我可以在 SVG 中调整特定属性，以便更好地与 Word 兼容，而不影响其在其他浏览器中的外观吗？

感谢您的帮助

 <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>

Answer 1

该问题源于 MS Word 无法正确处理 viewBox 属性。为了解决这个问题，我删除了 viewBox 属性，重新计算所有元素的位置，并将它们放置在“/”元素内。此调整允许 MS Word 正确渲染 SVG。