MacNala Posted June 27, 2012 Share Posted June 27, 2012 I am a very newbie at this subject and am puzzled by the results that arise from the attached small test page.When the page is opened the 3 rectangles, Red Green and Blue appear as desired in a horizontal line.However if you examine the source you will see that I have adjusted the position of the top left corner of the rectangles to achieve this.My question is why does it apparently need a greater adjustment upwards by 4 pixels more than I would expect to be needed. I think I can understand the spacing of 50 pixels due to normal spacing, but why the 4 extra?SVG Page 2.html Link to comment Share on other sites More sharing options...
niche Posted June 27, 2012 Share Posted June 27, 2012 Please post your relevant code in a code tag instead of a download. Link to comment Share on other sites More sharing options...
MacNala Posted June 27, 2012 Author Share Posted June 27, 2012 I would if I could.Exactly how do you use a code tag? Link to comment Share on other sites More sharing options...
MacNala Posted June 27, 2012 Author Share Posted June 27, 2012 <!DOCTYPE html><html><body><div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="100" height="100" style="fill:#FF0000;stroke-width:0;"/>> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="100" y="-154" width="100" height="100" style="fill:#00FF00;stroke-width:0;"/>> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="200" y="-308" width="100" height="100" style="fill:#0000FF;stroke-width:0;"/>> </svg></div></body></html> Does that work? Link to comment Share on other sites More sharing options...
thescientist Posted June 27, 2012 Share Posted June 27, 2012 is the extra > intended here? style="fill:#0000FF;stroke-width:0;"/>> Link to comment Share on other sites More sharing options...
MacNala Posted June 27, 2012 Author Share Posted June 27, 2012 No, and it doesn't affect the main question - the explanation of the required offset. Link to comment Share on other sites More sharing options...
MacNala Posted June 29, 2012 Author Share Posted June 29, 2012 I am still looking for an answer to this question. Link to comment Share on other sites More sharing options...
Ingolme Posted June 29, 2012 Share Posted June 29, 2012 I would suggest putting all your <rect> elements into one single <svg> element, because the <svg> elements themselves are positioned in the document according to the document flow. Since this is being embedded in an HTML document, you should set the width and height attributes of the <svg> element. The browser is giving whichever values it wants to the width and height at the moment. If the height of one of your svg elements were different from that of another, you would notice it being a different distance from the top because, by default they're aligned to the baseline of the text. You also should check the shape's values. In most browsers, the negative y values are going to take the rectangle outside of the viewable area, as I'm experiencing in Firefox. Link to comment Share on other sites More sharing options...
MacNala Posted June 29, 2012 Author Share Posted June 29, 2012 Way to go.Thank you for the tips, they solve my problem and lets me get on with the next step in the page setup. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now