I’m trying to convert an SVG that I have in my program as a String into a PNG using the Batik library, but I’m facing the problem that one path that contains the style transform-origin
is not in the resulting png image. I have tried other libraries but all lead to the same result. Has anyone encountered a similar problem ? My guess is that batik doesn’t know these css styles and just omits the whole element, but I need to convert any svg to png. Thanks for any advice.
This is my SVG image:
SVG image
And this is result:
Missing right backrest
Here is the SVG code and highlighted the path that do not shows:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="155.26 80.62 734.44 678.46">
<path stroke="#000" stroke-width="18.66" d="M214.59 139.95h615.78l-18.66 559.8z" style="fill:#E4E6EF"/>
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="167.94" height="93.3" x="391.86" y="186.6" class="w-100 h-100" preserveAspectRatio="none" viewBox="0 16.183 952.567 595.818">
<path d="M0 15.067h952.567v383.906H0z" style="stroke:rgb(0, 0, 0);fill:rgb(138, 157, 185)"/>
<rect width="376.883" height="96.74" x="293.021" y="55.082" rx="30" ry="30" style="stroke:rgb(0, 0, 0)"/>
<rect width="146.118" height="137.048" x="415.961" y="431.964" rx="40" ry="40" style="stroke:rgb(0, 0, 0);stroke-linecap:round;stroke-width:11px;stroke-miterlimit:4.83;stroke-dashoffset:1px;paint-order:fill"/>
<path d="M378.675 432.972h16.123v77.594h-16.123v-77.594Zm1.008 51.393h30.231v26.2h-30.231v-26.2Z" style="stroke:rgb(0, 0, 0)"/>
<path d="M565.605 511.069v-77.594h16.123v77.594h-16.123Zm1.008-51.393v-26.2h30.231v26.2h-30.231Z" style="stroke:rgb(0, 0, 0);transform-origin:581.225px 472.272px" transform="rotate(180 0 0)"/>
<path d="M395.806 544.828h185.418v31.239H395.806z" style="stroke:rgb(0, 0, 0);fill:rgb(59, 59, 59)"/>
<path fill="none" d="M0 0h167.94v93.3H0z" class="h-100 w-100"/>
</svg>
<path fill="orange" fill-opacity=".25" stroke="orange" stroke-dasharray="11, 4" stroke-width="3" d="M391.86 186.6H559.8v93.3H391.86z"/>
</a>
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="155.98" height="111.96" x="615.78" y="298.56" class="w-100 h-100" preserveAspectRatio="none" viewBox="0 16.183 952.567 595.818">
<path d="M0 15.067h952.567v383.906H0z" style="stroke:rgb(0, 0, 0);fill:rgb(138, 157, 185)"/>
<rect width="376.883" height="96.74" x="293.021" y="55.082" rx="30" ry="30" style="stroke:rgb(0, 0, 0)"/>
<rect width="146.118" height="137.048" x="415.961" y="431.964" rx="40" ry="40" style="stroke:rgb(0, 0, 0);stroke-linecap:round;stroke-width:11px;stroke-miterlimit:4.83;stroke-dashoffset:1px;paint-order:fill"/>
n
<path d="M378.675 432.972h16.123v77.594h-16.123v-77.594Zm1.008 51.393h30.231v26.2h-30.231v-26.2Z" style="stroke:rgb(0, 0, 0)"/>
Missing part -->>>>>>>> <path d="M565.605 511.069v-77.594h16.123v77.594h-16.123Zm1.008-51.393v-26.2h30.231v26.2h-30.231Z" style="stroke:rgb(0, 0, 0);transform-origin:581.225px 472.272px" transform="rotate(180 0 0)"/>
<path d="M395.806 544.828h185.418v31.239H395.806z" style="stroke:rgb(0, 0, 0);fill:rgb(59, 59, 59)"/>
<path fill="none" d="M0 0h155.98v111.96H0z" class="h-100 w-100"/>
</svg>
</a>
</svg>
Roman Pejs is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.