Geek Answers Handbook

CSS padding property for svg elements

I cannot understand how the CSS padding property for svg elements is interpreted. The following snippet ( jsFiddle ):

 <!DOCTYPE html> <meta charset="utf-8"> <title>noob d3</title> <style> svg{background-color:beige; padding:0px 0px 50px 50px;} rect{fill:red; stroke:none; shape-rendering:crispEdges;} </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> d3.select("body") .append("svg") .attr("width", 155) .attr("height", 105) .append("g") .append("rect") .attr("class", "frame") .attr("x", 50) .attr("y", 50) .attr("width", 50) .attr("height", 50); </script> </body>

... is significantly different in Firefox and Chrome. To make matters worse, not a single display makes sense to me: the size of the displayed svg element (the "beige" rectangle) looks much larger than I expected.

So my question is twofold: 1) How should the padding property of an svg element affect where things are drawn in it? 2) Is there a polyfill that ensures that both the Chrome and Firefox browsers handle the padding the same way?

+7
css firefox google-chrome svg
source share
3 answers

AFAIK, the SVG standard does not indicate anything like an add-on, so it is processed inconsistently. Just set the SVG to your desired size (with padding) and maybe add a rect to make it look like you want it to appear.

+17
source share

From my experience (provided, still very little, as I am still learning SVG), I have deviated from using the add-on where I could do it. I was asked when I first learned SVG that, if possible, I use margin instead of filling.

This is also due to the fact that you can use display: block; and margin: 0 auto; so that the left and right sides of the SVG are located directly in the middle of the screen.

+3
source share

There are no indents or margins, but you can set the x and y attributes so that elements inside or outside get indentation and margin. For example, if an element starts with (0,0), starting with (10, 10), the value 10 will be automatically set.

0
source share

More articles:


All Articles