17

我无法弄清楚 CSSpadding属性是如何为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）元素的padding属性应该如何影响事物在其中绘制的位置？2) 是否有一个 polyfill 可以确保 Chrome 和 Firefox 都以相同的方式处理填充？svg

4

4 回答 4

33

AFAIK，SVG标准没有指定任何像填充一样的东西，这就是为什么它的处理不一致。只需将 SVG 设置为您想要的大小（带填充），然后添加一个rect以使其看起来像您想要的那样。

于 2013-10-31T13:08:57.857 回答
6

根据我的经验（当然，仍然很少，因为我还在学习 SVG），我已经偏离了尽可能使用填充的方法。当我第一次学习 SVG 时，有人建议我尽可能使用边距代替填充。

这也是因为您可以使用display: block;andmargin: 0 auto;使 SVG 的左侧和右侧直接适合屏幕中间。

于 2013-10-30T22:49:57.677 回答
1

没有填充或边距，但您可以设置 x 和 y 属性，以便内部或外部的元素获得填充和边距。例如，如果一个元素从 (0,0) 开始，则从 (10, 10) 开始将自动给出 10 的边距。

于 2017-10-10T15:01:06.373 回答
0

根据我在 firefox 和 chromium 上的尝试：svg 的指定宽度和高度包括填充。换句话说，如果你想要一个 20*20px 的图像，每边有 10px 的内边距，你应该将宽度设置为 20+10*2 = 40px（与高度相同），内边距设置为 10px

注意：20+10*2：20 是你想要的宽度，10 是你的填充，你加倍它，因为你想要两边都有。

于 2022-02-14T11:51:21.327 回答