Cameron McCormack wrote:
> Arjen: > > Remove the px in the font-size declaration. The size is > > not in pixels but in viewbox units. > > px and unitless values are always equivalent when they > represent lengths in SVG. Good answer Cameron. Another way of looking at it is that px is the default value for dimension, assuming you are familiar with default values. > Srinivas: > >> Here, though I am setting font-size="120px", when I view > >> the svg file in browser, it is not 120 pixel high. > > It seems to be using the right font size for me in Firefox > (Nightly, 17). Compare it with an HTML page with 120px > Arial text. Just because the font size is 120px doesn't > mean that the distance from the bottom of the "H" to the > top is 120px -- that's just the ascent of the font. Also correct. So Srinivas, if you still are not getting what you are looking for, it is because you are looking for something based on a faulty assumption. It was rendering correctly. It was not rendering they way you expected. I know because I had the same problem when I first started using SVG. In order to get an H and l's that go from top to bottom of the viewBox you defined, you'll have to use a larger value for font-size. However, when you accomplish that you'll find the bottoms of the e and the o are clipped, which I would find too annoying to put up with. You are then faced with the decision of adjusting the y value so they fit in the viewBox and going with a slightly smaller font-size value or "manually" adjusting the y value for the e and o so they'll be fully contained in your viewBox. If you don't want to go to that extreme, the following should do what you're looking for: <text x="0" y="118" font-family="arial" font-size="164" fill="blue" >Hello</text> Or if you do, you could use this instead: <text x="0" y="120" font-family="arial" font-size="167" fill="blue" >H <tspan dx="-46" dy="-2">e</tspan> <tspan dx="-46" dy="+2">ll</tspan> <tspan dx="-46" dy="-2">o</tspan> </text> Depending on just how finicky you want to get or the requirements of the project. I expect my tools to fulfill my needs but in order for them to do so I have to learn their limitations. There are a couple of things I use to find exactly what I want. One is the ability to lay one element on top of another. Another is to use svg fragments inside the main svg. By using text in different colors I can adjust the size and placement until it fits exactly what I want. Another thing that might help in understanding how SVG renders is to remember that the V in SVG stands for vector. A vector is a mathematical concept and vectors have no thickness. Therefore the vector is invisible until a stroke is added and in SVG the stroke is added on both sides of the the vector. I was accustomed to raster graphics and it took me a while to gain an understanding of the differences. When I mentally connected the mathematical concept of vector to the new drawing tool I was learning it made things much easier for me to understand. ____________________________________________________________ I must be travelling, Jason tc+ ?23 ?mgt mt tne ?t20 t4++ ?t5 ?tp tg+ ?th ?to ru- ge++ 3i c++ jt- au+ ls pi+ ta+ he+ kk++ hi+ as+ va+ dr ?ith vr ne so+ zh vi da sy ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
