Second line of X axis text in SVG is not rendered correctly.

Topics: Converters and Runtime, SVG
Jun 22, 2012 at 7:21 PM

I used sample code from http://sharpvectors.codeplex.com/discussions/250145 to convert SVG to PNG, the rendered picture is

See the bottom line there is a line of text only half displayed. The SVG XML is

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="268" height="350">
  <defs>
    <clipPath id="highcharts-2">
      <rect width="209" height="294" x="0" y="0" fill="none" rx="0" ry="0" stroke-width="0"></rect>
    </clipPath>
  </defs>
  <rect width="268" height="350" x="0" y="0" fill="#FFFFFF" rx="5" ry="5" stroke-width="0" stroke="#4572A7"></rect>
  <g class="highcharts-grid" ></g>
  <g class="highcharts-grid" >
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 254.5 L 258 254.5"></path>
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 205.5 L 258 205.5"></path>
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 157.5 L 258 157.5"></path>
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 108.5 L 258 108.5"></path>
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 59.5 L 258 59.5"></path>
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 10.5 L 258 10.5"></path>
    <path  fill="none" stroke-width="1" stroke="#C0C0C0" d="M 49 303.5 L 258 303.5"></path>
  </g>
  <g class="highcharts-series-group" >
    <g class="highcharts-series" visibility="visible" transform="translate(49,10)" clip-path="url(#highcharts-2)">
      <rect  width="79" height="0" x="12.5" y="292.5" fill="none" rx="0" ry="0" stroke-width="5" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)"></rect>
      <rect  width="79" height="0" x="12.5" y="292.5" fill="none" rx="0" ry="0" stroke-width="3" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)"></rect>
      <rect  width="79" height="0" x="12.5" y="292.5" fill="none" rx="0" ry="0" stroke-width="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.15" transform="translate(1,1)"></rect>
      <rect width="79" height="0" x="12.5" y="292.5" fill="#6c9e37" rx="0" ry="0" stroke-width="1" stroke="#FFFFFF"></rect>
    </g>
    <g class="highcharts-series" visibility="visible" transform="translate(49,10)" clip-path="url(#highcharts-2)">
      <rect  width="79" height="0" x="116.5" y="26.5" fill="none" rx="0" ry="0" stroke-width="5" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)"></rect>
      <rect  width="79" height="0" x="116.5" y="26.5" fill="none" rx="0" ry="0" stroke-width="3" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)"></rect>
      <rect  width="79" height="0" x="116.5" y="26.5" fill="none" rx="0" ry="0" stroke-width="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.15" transform="translate(1,1)"></rect>
      <rect width="79" height="0" x="116.5" y="26.5" fill="#e4dcb2" rx="0" ry="0" stroke-width="1" stroke="#FFFFFF"></rect>
    </g>
    <g class="highcharts-series" visibility="visible" transform="translate(49,10)" clip-path="url(#highcharts-2)">
      <rect  width="79" height="266" x="116.5" y="26.5" fill="none" rx="0" ry="0" stroke-width="5" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)"></rect>
      <rect  width="79" height="266" x="116.5" y="26.5" fill="none" rx="0" ry="0" stroke-width="3" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)"></rect>
      <rect  width="79" height="266" x="116.5" y="26.5" fill="none" rx="0" ry="0" stroke-width="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.15" transform="translate(1,1)"></rect>
      <rect width="79" height="266" x="116.5" y="26.5" fill="#7490a3" rx="0" ry="0" stroke-width="1" stroke="#FFFFFF"></rect>
    </g>
  </g>
  <g class="highcharts-axis" >
    <text style="position: absolute; line-height: 16px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #737373; font-size: 12px; fill: #737373" x="101.25" y="321" visibility="visible" text-anchor="middle">
      <tspan style="font-weight: bold" x="101.25">$0</tspan>
      <tspan style="display: block" x="101.25" dy="16px">Need</tspan>
    </text>
    <text style="position: absolute; line-height: 16px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #737373; font-size: 12px; fill: #737373" x="205.75" y="321" visibility="visible" text-anchor="middle">
      <tspan style="font-weight: bold" x="205.75">$1,362</tspan>
      <tspan style="display: block" x="205.75" dy="16px">Have</tspan>
    </text>
    <path fill="none" stroke-width="1" stroke="#C0D0E0" d="M 258.5 303 L 258.5 308"></path>
    <path fill="none" stroke-width="1" stroke="#C0D0E0" d="M 154.5 303 L 154.5 308"></path>
  </g>
  <g class="highcharts-axis" >
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="308.6" visibility="visible" text-anchor="end">
      <tspan x="41">0</tspan>
    </text>
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="259.766666666667" visibility="visible" text-anchor="end">
      <tspan x="41">250</tspan>
    </text>
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="210.933333333333" visibility="visible" text-anchor="end">
      <tspan x="41">500</tspan>
    </text>
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="162.1" visibility="visible" text-anchor="end">
      <tspan x="41">750</tspan>
    </text>
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="113.266666666667" visibility="visible" text-anchor="end">
      <tspan x="41">1,000</tspan>
    </text>
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="64.4333333333333" visibility="visible" text-anchor="end">
      <tspan x="41">1,250</tspan>
    </text>
    <text style="position: absolute; line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #666; font-size: 11px; fill: #666" x="41" y="15.6" visibility="visible" text-anchor="end">
      <tspan x="41">1,500</tspan>
    </text>
  </g>
  <path  fill="none" visibility="visible" stroke-width="1" stroke="#C0D0E0" d="M 49 303.5 L 258 303.5"></path>
  <g style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; white-space: nowrap; padding-top: 0px"  visibility="hidden">
    <rect  width="0" height="0" x="0" y="0" fill="none" rx="5" ry="5" stroke-width="5" fill-opacity="0.85" anchorX="0" anchorY="0" stroke="rgb(0, 0, 0)" stroke-opacity="0.05" transform="translate(1,1)"></rect>
    <rect  width="0" height="0" x="0" y="0" fill="none" rx="5" ry="5" stroke-width="3" fill-opacity="0.85" anchorX="0" anchorY="0" stroke="rgb(0, 0, 0)" stroke-opacity="0.1" transform="translate(1,1)"></rect>
    <rect  width="0" height="0" x="0" y="0" fill="none" rx="5" ry="5" stroke-width="1" fill-opacity="0.85" anchorX="0" anchorY="0" stroke="rgb(0, 0, 0)" stroke-opacity="0.15" transform="translate(1,1)"></rect>
    <rect width="0" height="0" x="0" y="0" fill="rgb(255,255,255)" rx="5" ry="5" stroke-width="2" fill-opacity="0.85" anchorX="0" anchorY="0"></rect>
    <text style="position: absolute; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; color: #333333; font-size: 12px; fill: #333333"  x="0" y="13"></text>
  </g>
  <g class="highcharts-tracker" >
    <g  transform="translate(49,10)" clip-path="url(#highcharts-2)">
      <rect  width="80" height="6" x="12" y="290" fill="rgb(192,192,192)" visibility="visible" rx="0" ry="0" stroke-width="0" fill-opacity="0.002"></rect>
    </g>
    <g  transform="translate(49,10)" clip-path="url(#highcharts-2)">
      <rect  width="80" height="6" x="116" y="24" fill="rgb(192,192,192)" visibility="visible" rx="0" ry="0" stroke-width="0" fill-opacity="0.002"></rect>
    </g>
    <g  transform="translate(49,10)" clip-path="url(#highcharts-2)">
      <rect  width="80" height="267" x="116" y="26" fill="rgb(192,192,192)" visibility="visible" rx="0" ry="0" stroke-width="0" fill-opacity="0.002"></rect>
    </g>
  </g>
</svg>