Re: stroke-width values

This thread may help you:
http://groups.google.com/group/mozilla.dev.tech.svg/browse_thread/thread/1c36a5f200072fc2/965fcf6f36f7838a

Browsers have been focusing on SVGF 1.1.  It's too bad browsers don't
yet support non-scaling stroke:
http://www.w3.org/TR/SVGMobile12/painting.html#NonScalingStroke (a
SVGT 1.2 feature)

Regards,
Jeff

On Wed, Aug 20, 2008 at 3:47 AM,  <david.vergnaud@finnova.ch> wrote:
>
> Hi everyone,
>
> I'm having a hard time trying to automatically generate SVG objects that look the way I want. I'm translating them from another vector format, so I'm not all free about the values (e.g. the viewbox attributes, as well as width and height, are set and can't be changed).
> One thing I still have control over is the stroke-width, and that seems to be the one that doesn't work - and I can't really make any sense of the specification and what I'm seeing now. Here's a short example:
>
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="453.55pt" height="310.75pt" viewBox="1134 1418 15695 10754">
>  <g  id="_x0000_s1053">
>
>    <g  id="_x0000_s1059">
>      <svg x="5682" y="5038" width="636" height="484" viewBox="0 0 21600 21600" preserveAspectRatio="none" fill="white" stroke="cyan" stroke-width="4.132231404958677%" opacity="1" overflow="visible">
>        <path d="M 10800,0 L 0,10800 10800,21600 21600,10800 z "/>
>      </svg>
>    </g>
>    <g  transform=" translate(12012 0) matrix(-1 0 0 1 0 0) rotate(90 6006 5921)" id="_x0000_s1073">
>      <svg x="5606" y="5917" width="800" height="9" viewBox="0 0 21600 21600" preserveAspectRatio="none" fill="none" stroke="purple" stroke-width="10000px" opacity="1" overflow="visible">
>        <path d="M 0,0 L 0,0 0,21600 21600,21600 M 0,0 "/>
>      </svg>
>    </g>
>    <g  id="_x0000_s1104">
>      <svg x="5224" y="6321" width="1569" height="485" viewBox="0 0 21600 21600" preserveAspectRatio="none" fill="white" stroke="red" stroke-width="4.123711340206185%" opacity="1" overflow="visible">
>        <path d="M 0,0 L 0,21600 l 21600,0 L 21600,0 z "/>
>      </svg>
>    </g>
>    <g id="line1">
>      <line x1="0" x2="21600" y1="5038" y2="5038" stroke="green" stroke-width="10px"></line>
>    </g>
>    <g id="line3">
>      <line x1="0" x2="21600" y1="5522" y2="5522" stroke="blue" stroke-width="10px"></line>
>    </g>
>
>    <g id="line2">
>      <line x1="0" x2="21600" y1="6321" y2="6321" stroke="orange" stroke-width="10px"></line>
>    </g>
>
>    <g id="line4">
>      <line x1="0" x2="21600" y1="5917" y2="5917" stroke="pink" stroke-width="10px"></line>
>    </g>
>
>  </g>
> </svg>
>
> There probably are a few "inelegances" in this code, but as I said most of it's automatically generated (I added the horizontal lines myself). What I'm really not coping with is, as I said, the stroke-width attributes. Maybe someone could explain to me why:
> - the stroke-width of the purple line should be set to 10000px to be visible?
> - setting the stroke-width of this same purple line to 100% also makes it visible, BUT
> - the purple line exceeds its expected height (width before rotation) of 800 (depicted by the blue and orange horizontal lines)?
>
> My other concern is about the other objects' stroke-width attributes: although it looks alright on the cyan diamond, it looks a bit irregular on the red rectangle, where the vertical sides are "bolder" than the horizontal ones. I take it it's because the viewBox is "square" whilst the actual object isn't, but how can I solve that?
>
> I guess all this can be summed up in one big question (although of course I'd like to understand how it works): how can I set my stroke-width attributes so that all lines/sides have a width of 1 (one) "screen-pixel"? I tried px, pt, mm, no unit (which I think is the same as px), ... to no avail. It'd be real great if someone could take some time to explain this!
>
> Thanks in advance!
>
> David
>
>
>

Received on Wednesday, 20 August 2008 12:47:30 UTC