如何向 SVG 组添加诸如填充之类的内容？答案

【问题标题】：How to add something like padding to an SVG group?如何向 SVG 组添加诸如填充之类的内容？
【发布时间】：2015-09-03 13:11:29
【问题描述】：

我有以下 SVG - 当我的视口（浏览器）调整大小时，它会很好地（自动）调整大小。

<svg x="0" y="0" width:"50%">
</svg>

我想要的是 padding:5px 或类似的内容。

但是，如果我添加一个<rect x="5" width="50%"/>，那么它会比它应该的多 10 像素。

我想要的是<rect x="5" width="50% -10px"/>，但这是无效的。

谁能提出一个可行的替代方案？

我考虑过的一些...

5px 描边 - 几乎可以使用，但我需要透明度，并且描边呈现在填充顶部
变换 - 但我里面也有文本，我需要清晰，所以变换会歪斜...

【问题讨论】：

标签： svg

【解决方案1】：

在 svg2 中会变成：

rect {
    x: 5px;
    y: 5px;
    width: calc(50% - 10px);
    height: calc(50% - 10px);
}
svg {
    border: 1px dotted red;
    width: 100%;
    display: block;
}

<svg>
    <rect/>
</svg>

或查看fiddle。

【讨论】：

OT：Erik，您的网站，由 SVG 信息页面 examples link 引用，严重损坏。

【解决方案2】：

用<div> 包围<svg>。制作 div width: 50%，并将填充添加到 div。然后让 SVG 填充 div (width: 100%)。

body {
  margin: 0;
}


.svgwrapper {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
  background-color: blue;
}

<div class="svgwrapper">
  
  <svg width="100%" viewBox="0 0 100 50">
    <rect width="100%" height="100%" fill="limegreen"/>
  </svg>
  
</div>

这就是你想要的吗？

【讨论】：