Jump to content

HTML5 SVG Question


MacNala
 Share

Recommended Posts

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

<!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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...