Background color

[cwolcott]

Am I missing something. The background color of the chart is different.

Chart - Screen Capture

Chart - SVG conversion to PNG

Thanks for the great work on keeping this code up to date!!!

[tebjan]

Without the svg file/code i have no idea what the problem could be. Or is this for every svg the same?

[cwolcott]

It is happening within every image. I will post the svg file in a little bit. Our development is on a standalone network and I need to cut a CD.

The legend box has a white background, but the overall chart does not.

[tebjan]

You could simply add a big rect with <rect width="100%" height="100%" fill="white" /> at the beginning...

[cwolcott]

Related to the background not being displayed properly I looked at the SVG string produced from our javascript code:
var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generate(#{Chart1}.surface));

and it produces:

If I remove the fill-opacity="0" stroke="none" a box is drawn based on the fill color, but it is a small square in the upper left corner.

[cwolcott]

Here is an example of the SVG string.

<?xml version="1.0" standalone="yes"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs></defs><rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" /><path d="M 63 336.5 l 327 0 M 63.5 336 l 0 7 M 95.5 336 l 0 7 M 128.5 336 l 0 7 M 161.5 336 l 0 7 M 193.5 336 l 0 7 M 226.5 336 l 0 7 M 259.5 336 l 0 7 M 291.5 336 l 0 7 M 324.5 336 l 0 7 M 357.5 336 l 0 7 M 390.5 336 l 0 7" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="59" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="59" dy="3">0</tspan></text><text x="88" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="88" dy="3">10</tspan></text><text x="121" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="121" dy="3">20</tspan></text><text x="154" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="154" dy="3">30</tspan></text><text x="186" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="186" dy="3">40</tspan></text><text x="219" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="219" dy="3">50</tspan></text><text x="252" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="252" dy="3">60</tspan></text><text x="284" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="284" dy="3">70</tspan></text><text x="317" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="317" dy="3">80</tspan></text><text x="350" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="350" dy="3">90</tspan></text><text x="379" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="379" dy="3">100</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(1,0,0,1,220.5,383.8)" ><tspan x="" dy="4.5">X</tspan></text><path d="M 63.5 336 l 0 -326 M 63 336.5 l -6 0 M 63 303.5 l -6 0 M 63 270.5 l -6 0 M 63 238.5 l -6 0 M 63 205.5 l -6 0 M 63 173.5 l -6 0 M 63 140.5 l -6 0 M 63 107.5 l -6 0 M 63 75.5 l -6 0 M 63 42.5 l -6 0 M 63 10.5 l -6 0" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="46" y="336" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">0</tspan></text><text x="46" y="303" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">5</tspan></text><text x="39" y="270" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">10</tspan></text><text x="39" y="238" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">15</tspan></text><text x="39" y="205" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">20</tspan></text><text x="39" y="173" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">25</tspan></text><text x="39" y="140" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">30</tspan></text><text x="39" y="107" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">35</tspan></text><text x="39" y="75" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">40</tspan></text><text x="39" y="42" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">45</tspan></text><text x="39" y="10" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">50</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(0,-1,1,0,22.5,179.5)" ><tspan x="" dy="4.5">Y</tspan></text><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="6" stroke-opacity="0.05" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-opacity="0.1" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-opacity="0.15" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="#115fa6" fill-opacity="1" stroke-width="0.5" z-index="3000" transform="matrix(1,0,0,1,0,0)" /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,63,336)"  /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,226.5,10)"  /></svg>

[tebjan]

please put the svg into a pastebin or in a code tag... its not displayed like this.

[cwolcott]

Here is a post I added to the Ext.NET thread @ http://forums.ext.net/showthread.php?25590.

The following javascript line of code:

var svg = Ext.htmlEncode(Ext.draw.engine.SvgExporter.generate(#{Chart1}.surface));

produces the following SVG text:

<?xml version="1.0" standalone="yes"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs></defs><rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" /><path d="M 63 336.5 l 327 0 M 63.5 336 l 0 7 M 95.5 336 l 0 7 M 128.5 336 l 0 7 M 161.5 336 l 0 7 M 193.5 336 l 0 7 M 226.5 336 l 0 7 M 259.5 336 l 0 7 M 291.5 336 l 0 7 M 324.5 336 l 0 7 M 357.5 336 l 0 7 M 390.5 336 l 0 7" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="59" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="59" dy="3">0</tspan></text><text x="88" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="88" dy="3">10</tspan></text><text x="121" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="121" dy="3">20</tspan></text><text x="154" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="154" dy="3">30</tspan></text><text x="186" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="186" dy="3">40</tspan></text><text x="219" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="219" dy="3">50</tspan></text><text x="252" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="252" dy="3">60</tspan></text><text x="284" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="284" dy="3">70</tspan></text><text x="317" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="317" dy="3">80</tspan></text><text x="350" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="350" dy="3">90</tspan></text><text x="379" y="354.5" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="379" dy="3">100</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(1,0,0,1,220.5,383.8)" ><tspan x="" dy="4.5">X</tspan></text><path d="M 63.5 336 l 0 -326 M 63 336.5 l -6 0 M 63 303.5 l -6 0 M 63 270.5 l -6 0 M 63 238.5 l -6 0 M 63 205.5 l -6 0 M 63 173.5 l -6 0 M 63 140.5 l -6 0 M 63 107.5 l -6 0 M 63 75.5 l -6 0 M 63 42.5 l -6 0 M 63 10.5 l -6 0" fill="none" stroke="#444" stroke-width="1" z-index="0" transform="matrix(1,0,0,1,0,0)" /><text x="46" y="336" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">0</tspan></text><text x="46" y="303" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="46" dy="3">5</tspan></text><text x="39" y="270" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">10</tspan></text><text x="39" y="238" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">15</tspan></text><text x="39" y="205" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">20</tspan></text><text x="39" y="173" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">25</tspan></text><text x="39" y="140" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">30</tspan></text><text x="39" y="107" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">35</tspan></text><text x="39" y="75" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">40</tspan></text><text x="39" y="42" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">45</tspan></text><text x="39" y="10" font-size="12" font-family="Arial, Helvetica, sans-serif" fill="#444" transform="matrix(1,0,0,1,0,0)" ><tspan x="39" dy="3">50</tspan></text><text x="0" y="0" font-size="18" font-family="Arial" fill="#444" transform="matrix(0,-1,1,0,22.5,179.5)" ><tspan x="" dy="4.5">Y</tspan></text><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="6" stroke-opacity="0.05" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="4" stroke-opacity="0.1" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="rgb(0, 0, 0)" stroke-width="2" stroke-opacity="0.15" z-index="0" transform="matrix(1,0,0,1,1,1)" /><path d="M 63.00 336.00 226.50 10.00" fill="none" stroke="#115fa6" fill-opacity="1" stroke-width="0.5" z-index="3000" transform="matrix(1,0,0,1,0,0)" /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,63,336)"  /><circle cx="0" cy="0" r="3" fill="#115fa6" stroke="#555" transform="matrix(1,0,0,1,226.5,10)"  /></svg>

I need to understand how SvgExporter.generate creates the SVG text because within the SVG text is the following definition:

<rect width="100%" height="100%" fill="#fff" fill-opacity="0" stroke="none" />

It seems that no matter what my charts StyleSpec is the fill is always #fff:

StyleSpec="background: yellow;"

I also do not understand the other attributes fill-opacity="0" stroke="none".

---

If I submit the SVG text to http://www.fileformat.info/convert/image/svg2raster.htm , it looks like it displays properly. But if I manually modify the rectangle definition and change the fill="#fff" to fill="yellow" the background stays white. If I further remove fill-opacity="0" stroke="none" then I do get a back ground of yellow.

I get the following image ...

If I call the SVG.dll and put a breakpoint to manually change the SVG text so the rectangle definition looks like:

<rect width="100%" height="100%" fill="yellow" />

I get the following image with only the upper left quadrant filled with yellow.

Any thoughts?

[tebjan]

fill-opacity="0" means transparent. i have no idea what you do in the javascript that it is set to transparent. stroke does not matter in your case.

the rect 100% issue seems to be a bug... make sure you have set the width and height of the svg document to the size you want it rendered. i'll have a look at it next week.

a quick fix is to set the rect width and height to the size you want it. e.g. 400x400 or so...

[cwolcott]

No hurry. I appreciate all the work you have done to keep this code moving forward. I am on vacation for the next 16 days and will hopefully have some time to sit and investigate also.

I am looking into the Ext javascript code to determine why they build the rectangle the way they do.

My issue is the way the SVG text is handled and drawn between the SvgRaster website and the SVG.dll when I manually change the rect definition to <rect width="100%" height="100%" fill="yellow" />

Again not an immediate issue ...

[cwolcott]

Closing this thread. It turns out that I was not correctly assigning the background to the chart in Ext.NET. I was using StyleSpec="background: yellow;" instead of the property

[tebjan]

that's good news. thanks for coming back on this.