svg 元素的 CSS 填充属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19695136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS padding property for svg elements
提问by kjo
I can't figure out how the CSS paddingproperty is interpreted for svgelements. The following snippet (jsFiddle):
我不知道如何padding为svg元素解释CSS属性。以下代码段（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>
... displays significantly differently in Firefox and Chrome. What's worse, neither display really makes sense to me: the size of the displayed svgelement (the "beige" rectangle) looks to be significantly bigger than what I expected.
... 在 Firefox 和 Chrome 中显示明显不同。更糟糕的是，两种显示对我来说都没有意义：显示svg元素的大小（“米色”矩形）看起来比我预期的要大得多。
So my question is two-fold: 1) How is the paddingproperty of an svgelement supposedto affect where things get drawn within it? 2) Is there a polyfill that will ensure that both Chrome and Firefox both handle padding in the same way?
所以我的问题有两个方面：1)元素的padding属性应该如何影响其中绘制内容的位置？2) 是否有一种 polyfill 可以确保 Chrome 和 Firefox 都以相同的方式处理填充？svg
回答by Lars Kotthoff
AFAIK, the SVG standard doesn't specify anything like padding, which is why it's handled inconsistently. Just set the SVG to the size you want (with padding) and maybe add a rectto make it appear like you want it to appear.
AFAIK，SVG 标准没有指定像填充这样的任何东西，这就是它处理不一致的原因。只需将 SVG 设置为您想要的大小（带填充），然后添加一个rect使其看起来像您想要的那样。
回答by th3n3wguy
From my experience (granted, still very little as I am still learning SVG), I have strayed away from using padding wherever that I could do so. It was suggested to me when I was first learning SVG that I use margin in place of padding, if possible.
根据我的经验（当然，仍然很少，因为我还在学习 SVG），我已经偏离了在任何可以这样做的地方使用填充。当我第一次学习 SVG 时，有人建议我尽可能使用边距代替填充。
This is also because you can use display: block;and margin: 0 auto;to make the left and right sides of an SVG to fit directly into the middle of the screen.
这也是因为您可以使用display: block;和margin: 0 auto;使 SVG 的左侧和右侧直接适合屏幕中间。
回答by newbie
There is no padding or margin, but you can set x and y attributes such that the elements inside or outside get a padding and margin. For example, if an element starts at (0,0), starting at (10, 10) will automatically give a margin of 10.
没有填充或边距，但您可以设置 x 和 y 属性，以便内部或外部的元素获得填充和边距。例如，如果一个元素从 (0,0) 开始，从 (10, 10) 开始将自动给出 10 的边距。
