CODEWITHSUNDEEP
svgms-wordclip-pathviewbox
Mojtaba Jalili
Mojtaba Jalili

Reputation: 23

SVG Clip Path Compatibility Issues in Word Application

I'm using a clip path (id: contour1-contourMask) to define the border of Tehran city on a contour SVG created by Plotly.here is the code: https://codepen.io/mojtaba_codepen/pen/abeKJRX While it displays correctly in Chrome and Edge, the clip path appears stretched and ignores the bounding box in Word.

Has anyone encountered similar issues? Are there specific attributes I can adjust in the SVG for better compatibility with Word without affecting its appearance in other browsers?

Thanks for your helpdisplaying svg in 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>

Upvotes: 0

Views: 33

Answers (1)

Mojtaba Jalili
Mojtaba Jalili

Reputation: 23

The issue stems from MS Word's inability to handle the viewBox attribute properly. To resolve this, I removed the viewBox attribute, recalculated the positions of all elements, and placed them inside a <g/> element. This adjustment allows MS Word to render the SVG correctly.

Upvotes: 1

Related Questions