You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by Christian Bockermann <ch...@udo.edu> on 2010/07/16 12:37:58 UTC
Problem including user-css
Hi list,
I am trying to convert a single SVG file into a PNG with a user-based CSS.
Without the user-based CSS everything works fine - using batik-rasterizer as
well as embedding the Transcoder into my Java code.
Then I added:
log.info( "cssURL: {}", cssURL );
t.addTranscodingHint( ImageTranscoder.KEY_USER_STYLESHEET_URI, cssURL );
where "t" is the PNGTranscoder and "cssURL" is:
file:///Users/chris/sample.css
Unfortunately, I don't see any effects of the sample.css in the resulting PNG.
If I copy&paste the contents of the sample.css into a <style>...</style> section
of the SVG file, the styles are correctly applied.
I get the same behaviour, when using the batik-rasterizer:
java -jar batik-rasterizer.jar -cssUser /Users/chris/sample.css sample.svg
I tried to use "-cssUser file:///Users/chris/sample.css" or the like. Nothing worked.
Any ideas?
Best regards,
Chris
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: Problem including user-css
Posted by Christian Bockermann <ch...@udo.edu>.
Hi Julien,
thanks, your proposal works fine.
(I'd rather keep only the highlighting-stuff in a separate file, though).
So to clearify this:
Does a <style>...</style> section within an SVG document always overwrite
all style-settings from an external css?
A country in the worldmap.svg is an element
<g class="land fr" id="fr">....</g>
Now, "land" is defined in <style>...</style> within the svg. The external CSS
file provides the definition
.fr { fill: red; }
When transforming this, I wouldn't have expected to have the "land" overwrite
all settings from the external ".fr" definition.
To me this looks like:
(1) Apply all css from external files (i.e.: .fr {...} )
(2) Apply all locally-defined css (i.e.: <style>...</style> )
Thus, if "land" locally has a "fill", then this "fill" will overwrite an externally
included "fill" even though the order in the class attribute is "land fr".
Is this correct?
(Just trying to extend my understanding of css :-))
Thanks to everyone for the replies!
Chris
Am 16.07.2010 um 16:09 schrieb Julien Beghin:
> Hi Christian,
>
> I just tryied to figuer out about your problem
>
> First : I moved the style attribute content's from your SVG to the french css.
> (I then removed the empty) tag <style> from the SVG.
>
> Now, the command line produce an highligthed map as a png...
>
> Can you have a try ?
> (Using batik 1.8pre on XP)
>
> Hope it helps....
>
> De nouvelles Emoticones sur Messenger ? Téléchargez gratuitement les émoticônes Summer !
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
RE: Problem including user-css
Posted by Julien Beghin <mi...@hotmail.com>.
Hi Christian,
I just tryied to figuer out about your problem
First : I moved the style attribute content's from your SVG to the french css.
(I then removed the empty) tag <style> from the SVG.
Now, the command line produce an highligthed map as a png...
Can you have a try ?
(Using batik 1.8pre on XP)
Hope it helps....
_________________________________________________________________
Allumez et éteignez votre PC en un instant avec Windows 7 !
http://clk.atdmt.com/FRM/go/238030931/direct/01/
Re: Problem including user-css
Posted by Christian Bockermann <ch...@udo.edu>.
Hi Peter!
thanks for your quick response. Your example works fine here as well, so
it's definitely me failing to set up my "real" example the right way.
What I am trying to achive:
Convert the WorldMap.svg which has countries identified by a class
attribute into a png and use a style-sheet for highlighting a specific
country. Adding
.fr {
fill: red;
}
directly into the .svg-file correctly highlights France.
Specifying the same css-lines into a hightlight-fr.css and using the
rasterizer with -cssUser does not work.
I have bundled all the stuff into a zip-file at
https://secure.jwall.org/download/batik-test.zip
Within the folder contained in the file above, I run
java -jar batik-rasterizer.jar -cssUser highlight-fr.css WorldMap.svg
which somehow does not work. I'm not a CSS expert, though. Maybe I'm doing
something completely stupid - but I don't see it :-)
Version of batik is 1.7 on MacOS here.
Regards,
Chris
Am 16.07.2010 um 14:53 schrieb Peter Hull:
> I tried it with the rasterizer and it seemed to work:
> === me.svg ===
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
> <svg xmlns="http://www.w3.org/2000/svg" width="4cm" height="3cm"
> viewBox="0 0 400 300">
> <text id="sample" x="0" y="150">Hello, World</text>
> </svg>
>
> === me.css ===
> #sample {font-size: 48px; fill: red}
>
> and the command:
> java -jar batik-rasterizer.jar -cssUser me.css me.svg
> gave me large red text as expected. This is batik-1.7 on Windows/Java 1.6
>
> Pete
>
>
>
> On Fri, Jul 16, 2010 at 11:37 AM, Christian Bockermann
> <ch...@udo.edu> wrote:
>> Hi list,
>>
>> I am trying to convert a single SVG file into a PNG with a user-based CSS.
>>
>> Without the user-based CSS everything works fine - using batik-rasterizer as
>> well as embedding the Transcoder into my Java code.
>>
>> Then I added:
>>
>> log.info( "cssURL: {}", cssURL );
>> t.addTranscodingHint( ImageTranscoder.KEY_USER_STYLESHEET_URI, cssURL );
>>
>> where "t" is the PNGTranscoder and "cssURL" is:
>>
>> file:///Users/chris/sample.css
>>
>> Unfortunately, I don't see any effects of the sample.css in the resulting PNG.
>> If I copy&paste the contents of the sample.css into a <style>...</style> section
>> of the SVG file, the styles are correctly applied.
>>
>> I get the same behaviour, when using the batik-rasterizer:
>>
>> java -jar batik-rasterizer.jar -cssUser /Users/chris/sample.css sample.svg
>>
>> I tried to use "-cssUser file:///Users/chris/sample.css" or the like. Nothing worked.
>>
>> Any ideas?
>>
>> Best regards,
>>
>> Chris
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: Problem including user-css
Posted by Peter Hull <pe...@gmail.com>.
I tried it with the rasterizer and it seemed to work:
=== me.svg ===
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="4cm" height="3cm"
viewBox="0 0 400 300">
<text id="sample" x="0" y="150">Hello, World</text>
</svg>
=== me.css ===
#sample {font-size: 48px; fill: red}
and the command:
java -jar batik-rasterizer.jar -cssUser me.css me.svg
gave me large red text as expected. This is batik-1.7 on Windows/Java 1.6
Pete
On Fri, Jul 16, 2010 at 11:37 AM, Christian Bockermann
<ch...@udo.edu> wrote:
> Hi list,
>
> I am trying to convert a single SVG file into a PNG with a user-based CSS.
>
> Without the user-based CSS everything works fine - using batik-rasterizer as
> well as embedding the Transcoder into my Java code.
>
> Then I added:
>
> log.info( "cssURL: {}", cssURL );
> t.addTranscodingHint( ImageTranscoder.KEY_USER_STYLESHEET_URI, cssURL );
>
> where "t" is the PNGTranscoder and "cssURL" is:
>
> file:///Users/chris/sample.css
>
> Unfortunately, I don't see any effects of the sample.css in the resulting PNG.
> If I copy&paste the contents of the sample.css into a <style>...</style> section
> of the SVG file, the styles are correctly applied.
>
> I get the same behaviour, when using the batik-rasterizer:
>
> java -jar batik-rasterizer.jar -cssUser /Users/chris/sample.css sample.svg
>
> I tried to use "-cssUser file:///Users/chris/sample.css" or the like. Nothing worked.
>
> Any ideas?
>
> Best regards,
>
> Chris
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org