Question

我无法弄清楚如何为padding元素解释CSS 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元素的svg属性如何影响影响其中的内容？ 2）是否有polyfill确保Chrome和Firefox都以相同的方式处理填充？

Answer 1

AFAIK，SVG标准没有指定任何类似填充的内容，这就是为什么处理不一致的原因。只需将SVG设置为您想要的大小（使用填充），然后添加rect即可使其显示为您希望它出现。

Answer 2

根据我的经验（虽然我仍在学习SVG，但仍然很少），我已经偏离了使用填充，无论我在哪里都可以这样做。当我第一次学习SVG时，我建议使用margin来代替填充，如果可能的话。

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

Answer 3

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

svg元素的CSS填充属性

3 个答案: