svg 元素的 CSS 填充属性答案

【问题标题】：CSS padding property for svg elementssvg 元素的 CSS 填充属性
【发布时间】：2013-11-10 18:53:21
【问题描述】：

我无法弄清楚 CSS padding 属性是如何为 svg 元素解释的。以下 sn-p (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) 是否有一个 polyfill 可以确保 Chrome 和 Firefox 都以相同的方式处理填充？

【问题讨论】：

我环顾四周，发现了这篇文章：- davidsbigthoughts.blogspot.com/2011/11/… 我会在我的家用电脑上进行更多研究。附带说明一下，我在所有浏览器上都使用了 html5 画布，对我来说效果很好。
AFAIK，SVG 标准没有指定任何诸如填充之类的东西，这就是它处理不一致的原因。只需将 SVG 设置为您想要的大小（带填充），然后添加 rect 使其看起来像您想要的那样。
@LarsKotthoff：感谢您的评论；如果您发布它，我会接受它作为答案。
好的，谢谢，会这样做的。

标签： css google-chrome firefox svg d3.js

【解决方案1】：

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

【讨论】：

Chrome 在基于 SVG 坐标系进行绘图时似乎会尊重填充。因此，例如，如果您有一个具有 5px 左侧填充的 svg 元素，并且您在 (0,0) 的左上角绘制了一个 rect，那么 rect 将在 svg 元素内渲染 5px。像 Safari 这样的 Webkit 浏览器似乎不尊重这一点，并且会在元素内绘制相同的 rect 0px。

【解决方案2】：

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

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

【讨论】：

+1 提供有用的建议，尽管严格来说，它不能回答我的问题。
很抱歉。我不知道 SVG 标准（就像我说的，仍然是新的）没有在 SVG 本身内部指定填充。现在我知道了……
在这种情况下，边距和内边距不可互换。 svg 元素上的填充实际上拓宽了可以看到 svg 形状的画布。例如，如果您有一个元素位于 SVG 画布的边缘，那么您可以添加填充以使该形状不会被切断。而边距只会影响 svg 元素的右/左定位。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：