Question

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

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

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

然而，如果我添加一个<rect x="5" width="50%"/>，那么它比它应该增加10px。

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

有人可以建议一个可行的替代方案吗？

我考虑过的一些......

5px笔划 - 几乎可以工作，除了我需要透明度，并且笔划渲染在填充之上
转换 - 但我也在里面发短信，我需要清晰，所以转换会扭曲......

Answer 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。

Answer 2

使用<svg>围绕<div>。创建div width: 50%，并将填充添加到div。然后让SVG填充div（width: 100%）。

＆＃13;

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

＆＃13;

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

＆＃13;

这是你追求的吗？

如何在SVG组中添加填充等内容？

2 个答案: