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 Peter Hull <pe...@gmail.com> on 2011/02/02 11:54:57 UTC
cropping of thick strokes
I noticed that Batik will crop the edges of thick stroke lines so for example
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="256px" height="256px" version="1.1" viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<symbol id="rc">
<rect x="0" y="0" width="20" height="100" stroke="black"
stroke-width="10" fill="white" />
</symbol>
<use xlink:href="#rc" x="100" y="100" />
</svg>
will show a rect with apparently a thinner stroke on the top/left
because it was cropped at x=0 and y=0, even though the final shape is
rendered in the middle of the page.
Just for my information, is that to do with Batik's implementation or
is it in the SVG spec (I couldn't find the relevant section)
Thanks,
Peter
Re: cropping of thick strokes
Posted by th...@kodak.com.
Hi Peter,
Peter Hull <pe...@gmail.com> wrote on 02/03/2011 08:33:07 AM:
> On Thu, Feb 3, 2011 at 10:55 AM, <th...@kodak.com> wrote:
> > It's getting clipped by the 'symbol' element's clipping
rectangle.
> > If you read the symbol and use sections of the SVG Spec:
> > http://www.w3.org/TR/SVG/struct.html
> Now I've read that, I've realised that I don't need to use 'symbol'
> anyway for my purposes, just reference a rect defined in a <defs>
> section. The rect of course is not subject to clipping like the symbol
> contents inside their implicit svg.
Right or you can use a 'g'.
> Follow up question - why are the rect's right and bottom edges not
> also clipped? I see that the implicit svg will be assigned
> width="100%" height="100%" because no explicit size was specified in
> the use element, so does the calculation of a rect's size include its
> nominal width + half a stroke?
The 100% is percent of the _containing_ viewport (not the child
content).
In this case the viewport is established by the outermost 'svg' element.
So it ends up establishing a clip rect from 0,0 to the width and height
of the root SVG element (256,256) in this case.
Thomas DeWeese | CDG Advanced Development |
Eastman Kodak Company | 343 State Street | Rochester, NY 14650-0128 |
Thomas.DeWeese@Kodak.com | 585 724-0294 |
www.kodak.com
Re: cropping of thick strokes
Posted by Peter Hull <pe...@gmail.com>.
Thanks Thomas and Wade,
On Thu, Feb 3, 2011 at 10:55 AM, <th...@kodak.com> wrote:
>> > Just for my information, is that to do with Batik's implementation or
>> > is it in the SVG spec (I couldn't find the relevant section)
>
> It's getting clipped by the 'symbol' element's clipping rectangle.
> If you read the symbol and use sections of the SVG Spec:
> http://www.w3.org/TR/SVG/struct.html
Now I've read that, I've realised that I don't need to use 'symbol'
anyway for my purposes, just reference a rect defined in a <defs>
section. The rect of course is not subject to clipping like the symbol
contents inside their implicit svg.
Follow up question - why are the rect's right and bottom edges not
also clipped? I see that the implicit svg will be assigned
width="100%" height="100%" because no explicit size was specified in
the use element, so does the calculation of a rect's size include its
nominal width + half a stroke?
Pete
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: cropping of thick strokes
Posted by th...@kodak.com.
Hi Wade, Peter,
"G. Wade Johnson" <gw...@anomaly.org> wrote on 02/02/2011 06:31:03 PM:
> The cause of your symptom is probably the overflow attribute (which is
> defaulted on svg in this case). From the SVG 1.1 spec, section 14.3.3:
>
> So basically, the image is clipped at x=0 and y=0. Since the rectangle
> has a stroke-width of 10 and starts at 0,0, the top and left edges
> should be about half as thick. Since the stroke is centered on the
> coordinates you give.
Close (it has to do with the overflow) but not quite right. Since
the element is used at 100,100 it should not be clipped by the SVG
elements
implicit clipping rectangle.
> Peter Hull <pe...@gmail.com> wrote:
>
> > I noticed that Batik will crop the edges of thick stroke lines so for
> > example[...] will show a rect with apparently a thinner stroke on the
top/left
> > because it was cropped at x=0 and y=0, even though the final shape is
> > rendered in the middle of the page.
> >
> > Just for my information, is that to do with Batik's implementation or
> > is it in the SVG spec (I couldn't find the relevant section)
It's getting clipped by the 'symbol' element's clipping rectangle.
If you read the symbol and use sections of the SVG Spec:
http://www.w3.org/TR/SVG/struct.html
You will see that when a use references a symbol, a hidden
tree is created where the symbol element is replaced with an 'svg'
element. Since an svg element defaults to clipping to the viewBox
the symbol defaults to clipping. If you want to avoid this clip
you can set 'overflow="visible"' on the symbol element (or adjust it's
viewBox so it includes the child content).
Thomas DeWeese | CDG Advanced Development |
Eastman Kodak Company | 343 State Street | Rochester, NY 14650-0128 |
Thomas.DeWeese@Kodak.com | 585 724-0294 |
www.kodak.com
Re: cropping of thick strokes
Posted by "G. Wade Johnson" <gw...@anomaly.org>.
On Wed, 2 Feb 2011 10:54:57 +0000
Peter Hull <pe...@gmail.com> wrote:
> I noticed that Batik will crop the edges of thick stroke lines so for
> example <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> <svg width="256px" height="256px" version="1.1" viewBox="0 0 256 256"
> xmlns="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink" >
> <symbol id="rc">
> <rect x="0" y="0" width="20" height="100" stroke="black"
> stroke-width="10" fill="white" />
> </symbol>
> <use xlink:href="#rc" x="100" y="100" />
> </svg>
> will show a rect with apparently a thinner stroke on the top/left
> because it was cropped at x=0 and y=0, even though the final shape is
> rendered in the middle of the page.
>
> Just for my information, is that to do with Batik's implementation or
> is it in the SVG spec (I couldn't find the relevant section)
> Thanks,
> Peter
The cause of your symptom is probably the overflow attribute (which is
defaulted on svg in this case). From the SVG 1.1 spec, section 14.3.3:
"When an outermost svg element is stand-alone or embedded inline within
a parent XML grammar which does not use CSS layout or XSL formatting,
the ‘overflow’ property on the outermost svg element is ignored for the
purposes of visual rendering and the initial clipping path is set to
the bounds of the initial viewport."
So basically, the image is clipped at x=0 and y=0. Since the rectangle
has a stroke-width of 10 and starts at 0,0, the top and left edges
should be about half as thick. Since the stroke is centered on the
coordinates you give.
It sort of makes sense, once you've seen it in action.
G. Wade
--
Understanding is a three-edged sword. -- Kosh in "Deathwalker"
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org