我不知道CSS padding属性是如何解释svg元素的。下面的代码片段（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>...在Firefox和Chrome中的显示明显不同。更糟糕的是，这两种显示对我来说都没有意义：显示的svg元素（"米色"矩形）的大小看起来比我预期的要大得多。
所以我的问题有两个：1）svg元素的padding属性 * 应该 * 如何影响在其中绘制内容的位置？2）是否有一个多边形填充可以确保Chrome和Firefox都以相同的方式处理填充？
5条答案
按热度按时间wgmfuz8q1#
好吧，SVG标准并没有指定任何像填充这样的东西，这就是为什么它的处理不一致的原因。只要把SVG设置成你想要的大小（带填充），也许再加上一个
rect，让它看起来像你想要的那样。4szc88ey2#
从我的经验（当然，还是很少，因为我还在学习SVG），我已经偏离了使用填充，只要我可以这样做。有人建议我，当我第一次学习SVG，我用边距代替填充，如果可能的话。
这也是因为您可以使用
display: block;和margin: 0 auto;来使SVG的左侧和右侧直接适合屏幕的中间。wgx48brx3#
没有填充或边距，但可以设置x和y属性，使内部或外部的元素获得填充和边距。例如，如果一个元素从（0，0）开始，则从（10，10）开始将自动给出边距10。
whhtz7ly4#
最好的解决方案是打开Inkscape（或其他SVG编辑器）并更改维度
r7knjye25#
根据我在火狐和铬上所做的试验：svg指定的宽度和高度包括填充。换句话说，如果你想要一个2020px的图像，每边10px的填充，你应该设置宽度为20+102 = 40px（与高度相同），填充为10px
注：20+10*2：20是你想要的宽度，10是你的填充，你把它加倍，因为你想要它在两边。