Comments (11)
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
from svg.
Without the svg file/code i have no idea what the problem could be. Or is this for every svg the same?
from svg.
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.
from svg.
You could simply add a big rect with <rect width="100%" height="100%" fill="white" />
at the beginning...
from svg.
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.
from svg.
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>
from svg.
please put the svg into a pastebin or in a code tag... its not displayed like this.
from svg.
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.
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?
from svg.
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...
from svg.
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 ...
from svg.
that's good news. thanks for coming back on this.
from svg.
Related Issues (20)
- SVG rendered to PNG is all black instead of a gradient
- Draw Svg in Svg with different ViewBox
- Looking for new maintainer(s) HOT 41
- Contributors: Planned Cleanup - please comment HOT 7
- Contributors: TargetFrameworks - please comment HOT 1
- Contributors: Code Generators HOT 1
- Contributors: ISvgEventCaller and Events Support HOT 1
- Contributors: Extension Methods HOT 2
- letter-spacing overlapping text when converting to png HOT 1
- The Icon file converted from the SVG file does not render properly in the Application Icon of the Form.
- The Icon file converted from the SVG file does not render properly in the Application Icon of the Form. HOT 1
- Diverse problems with text alignment when rendering to EMF HOT 3
- CSS Outline not working HOT 2
- Bounds not correctly computed for texts and groups HOT 5
- anti
- SvgDocument.Ppi not works as expect (2 problems)
- Logo get rendered incorrect HOT 1
- Documentation generation is broken HOT 1
- Incorrect bounds if a path has 0 length
- Transformations data on a Linux OS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg.