Input SVG:
Command:
In the browser it looks fine, but when I convert to pdf using prince the text is no longer wrapping and in the wrong places.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="270" height="286"><desc>Created with Highcharts 9.1.0</desc><defs><clipPath id="highcharts-l2fn4bq-9-"><rect x="0" y="0" width="270" height="217" fill="none"></rect></clipPath><clipPath id="highcharts-l2fn4bq-13-"><rect x="0" y="10" width="270" height="217" fill="none"></rect></clipPath></defs><rect fill="none" class="highcharts-background" x="0" y="0" width="270" height="286" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="0" y="10" width="270" height="217"></rect><g class="highcharts-pane-group" data-z-index="0"></g><g class="highcharts-grid highcharts-xaxis-grid" data-z-index="1"><path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 134.5 10 L 134.5 227" opacity="1"></path><path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M 269.5 10 L 269.5 227" opacity="1"></path><path fill="none" stroke-dasharray="none" data-z-index="1" class="highcharts-grid-line" d="M -0.5 10 L -0.5 227" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="0" y="10" width="270" height="217"></rect><g class="highcharts-axis highcharts-xaxis" data-z-index="2"><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 0 227 L 270 227"></path></g><g class="highcharts-series-group" data-z-index="3"><g class="highcharts-series highcharts-series-0 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(0,10) scale(1 1)"><path fill="cmyk(.65, .4, 0, .05)" d="M 20 150 L 116 150 C 119 150 122 153 122 156 L 122 218 C 122 218 122 218 122 218 L 14 218 C 14 218 14 218 14 218 L 14 156 C 14 153 17 150 20 150 Z" opacity="1" class="highcharts-point highcharts-color-0"></path><path fill="cmyk(.5, 0, 1, .05)" d="M 155 29 L 251 29 C 254 29 257 32 257 35 L 257 218 C 257 218 257 218 257 218 L 149 218 C 149 218 149 218 149 218 L 149 35 C 149 32 152 29 155 29 Z" opacity="1" class="highcharts-point highcharts-color-1"></path></g><g class="highcharts-markers highcharts-series-0 highcharts-column-series" data-z-index="0.1" opacity="1" transform="translate(0,10) scale(1 1)"></g></g><text x="135" text-anchor="middle" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"></text><text x="135" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="24"></text><text x="0" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color:#666666;fill:#666666;" y="283"></text><g class="highcharts-data-labels highcharts-series-0 highcharts-column-series" data-z-index="6" opacity="1" transform="translate(0,10) scale(1 1)"><g class="highcharts-label highcharts-data-label highcharts-data-label-color-0" data-z-index="1" transform="translate(30,116)"><text x="10" data-z-index="1" y="23.984375" style="color:#000000;font-family:Helvetica;font-size:14px;font-weight:normal;line-height:22px;fill:#000000;"><tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">180 kWh<tspan x="10" y="23.984375"></tspan></tspan>180 kWh</text></g><g class="highcharts-label highcharts-data-label highcharts-data-label-color-1" data-z-index="1" transform="translate(165,-5)"><text x="10" data-z-index="1" y="23.984375" style="color:#000000;font-family:Helvetica;font-size:14px;font-weight:normal;line-height:22px;fill:#000000;"><tspan class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">500 kWh<tspan x="10" y="23.984375"></tspan></tspan>500 kWh</text></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels" data-z-index="7"><text x="67.5" style="color:#000000;cursor:default;font-size:14px;text-align:center;font-family:Helvetica;line-height:22px;fill:#000000;" text-anchor="middle" transform="translate(0,0)" y="249" opacity="1">You</text><text x="202.5" style="color:#000000;cursor:default;font-size:14px;text-align:center;font-family:Helvetica;line-height:22px;fill:#000000;" text-anchor="middle" transform="translate(0,0)" y="249" opacity="1">Homes in the<tspan dy="22" x="202.5"></tspan>Efficiency Zone</text></g><g class="highcharts-control-points" data-z-index="99" clip-path="url(#highcharts-l2fn4bq-13-)"></g></svg>
Command:
prince chart.svg
In the browser it looks fine, but when I convert to pdf using prince the text is no longer wrapping and in the wrong places.
Edited by jaredculp