Log in / Register

Forum › Bugs

SVG path arc viewBox resize problem

pestafo
Hi,

When drawing svg path with arcs close to the viewbox borders the 'canvas' gets automatically resized.

The following html code contains two simple pie charts. They both have a red border via css on the svg element and contain a rect with the size of the viewbox and a black background.

I did expect that the black rect would fit exactly into the red border of the svg. This is only the case with the second svg pie chart where all four segments are 90 degrees starting at 0 degree.

As soon as an arc comes close to the viewbox border, as with the first svg pie, the content gets resized and a gap between the black rect and the red frame appears. The gap varies depending on the position and number of arcs.

Is this a bug or do I something wrong?

Regards,
Peter

Code follows in next post.
pestafo
Depending on the number of segments and their position the resulting svg image has a different size.

<html>
  <head>
    <title>nop</title>
<style type="text/css">
.graphPane {
margin:0;
padding:0; 
border: 1px solid red;
}
</style>
  </head>
  <body>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30mm" height="30mm" viewBox="0 0 85.03937007874015748031496062 85.03937007874015748031496062" class="graphPane">
        <rect x="0" y="0" width="85.03937007874015748031496062" height="85.03937007874015748031496062" fill="black" />
        <g name="pie">
          <g name="segments" stroke="white" stroke-width="0.2pt" stroke-linejoin="bevel">
            <path name="A" d="M42.519685039370078740157480310,42.519685039370078740157480310 L42.519685039370071003152392277,0.400000000000000000000000000A42.119685039370078740157480310,42.119685039370078740157480310 0 1,1 31.892001626902914881889763776,83.27652757041148492283464566 z" style="fill:rgb(0,52,101);" />
            <path name="B" d="M42.519685039370078740157480310,42.519685039370078740157480310 L31.892001626902914881889763776,83.27652757041148492283464566A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 5.039164750197779681889763779,23.303065496154894182677165352 z" style="fill:rgb(0,71,136);" />
            <path name="C" d="M42.519685039370078740157480310,42.519685039370078740157480310 L5.039164750197779681889763779,23.303065496154894182677165352A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 30.667653941860228689763779524,2.101901494507117017322834645 z" style="fill:rgb(0,88,168);" />
            <path name="D" d="M42.519685039370078740157480310,42.519685039370078740157480310 L30.667653941860228689763779524,2.101901494507117017322834645A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 42.519685039370135506736201305,0.400000000000000000000000000 z" style="fill:rgb(0,116,221);" />
          </g>
        </g>
      </svg>
    </div>
    <div>
	  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30mm" height="30mm" viewBox="0 0 85.03937007874015748031496062 85.03937007874015748031496062" class="graphPane">
        <rect x="0" y="0" width="85.03937007874015748031496062" height="85.03937007874015748031496062" fill="black" />
        <g name="pie">
          <g name="segments" stroke="white" stroke-width="0.2pt" stroke-linejoin="bevel">
            <path name="A" d="M42.519685039370078740157480310,42.519685039370078740157480310 L42.519685039370071003152392277,0.400000000000000000000000000A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 84.63937007874015748031496062,42.519685039370068424150696267 z" style="fill:rgb(0,52,101);" />
            <path name="B" d="M42.519685039370078740157480310,42.519685039370078740157480310 L84.63937007874015748031496062,42.519685039370068424150696267A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 42.519685039370091635165960363,84.63937007874015748031496062 z" style="fill:rgb(0,71,136);" />
            <path name="C" d="M42.519685039370078740157480310,42.519685039370078740157480310 L42.519685039370091635165960363,84.63937007874015748031496062A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 0.400000000000000000000000000,42.519685039370094214167656372 z" style="fill:rgb(0,88,168);" />
            <path name="D" d="M42.519685039370078740157480310,42.519685039370078740157480310 L0.400000000000000000000000000,42.519685039370094214167656372A42.119685039370078740157480310,42.119685039370078740157480310 0 0,1 42.519685039370060687145608238,0.400000000000000000000000000 z" style="fill:rgb(0,116,221);" />
          </g>
        </g>
      </svg>
    </div>
  </body>
</html>
mikeday
How big is this gap? I'm having trouble seeing a difference between the two pie charts when I convert the file to PDF with Prince.
pestafo
Converted with Prince 6.0 rev 7 the first svg has the following white 'gaps' between the svg border and the black background.

top: ~1mm
right: ~1.5mm
bottom: ~2.5mm
left: ~2mm
mikeday
Is that after printing the PDF out on paper, or examining it on screen?
pestafo
I printed the PDF to measure the gaps.
mikeday
We'll give that a try and see how it looks. Circular arcs in SVG are converted to sequences of cubic or quadratic curves in PDF, so perhaps some error is creeping in.
mikeday
I'm still having trouble seeing this; I've printed it out at two different scales but can't really see any white gap between the red border and the black square. Would you be able to email me (mikeday@yeslogic.com) a screenshot? Or if it only shows up on printed output, a scanned image? By the way, how are you printing out the PDF file? eg. from Acrobat on Windows, or Preview on MacOS X, or something or other on Linux?
mikeday
For the record, the problem was that the document was being parsed as HTML, and the HTML parser converts tag and attribute names to lowercase, breaking the SVG "viewBox" attribute. The workaround is to use XML, by passing "-i xml" on the command-line, renaming the file to have a ".xml" or ".xhtml" extension, or specifying setHtml(false) in the Java interface.