为什么浏览器为什么在svg元素周围添加填充，如何防止填充？

Question

我正在尝试使用SVG制作这样的图形：

在这里，紫色框是带有白色右边框的跨度，每列中有12个。将宽度设置为8.333％（即100/12）可以解决此问题。

出于各种原因（例如打印），我正尝试使用svg元素来做到这一点，例如：

<div class="svg-test">
  <svg>
    <rect x="0" y="0" width="100%" height="100%"></rect>
  </svg>
  ....10 more of the same      
  <svg>
    <rect x="0" y="0" width="100%" height="100%"></rect>
  </svg>
</div>

具有简单的样式：

.svg-test 
{
  width: 400px;
}

.svg-test svg 
{
   height: 20px;
   width: 8.333333%;
   fill: #7a5c8e;
}

（并在此处查看：https://jsfiddle.net/un8L04ec）

这些元素中的任何元素都没有填充或边距（浏览器工具对此进行了确认），但是所有浏览器都以如下方式呈现此标记：

浏览器正在添加一些不必要的填充，这会导致我的框（其宽度总计为100％，因此应该适合一行）换行到下一行。为什么会这样，我该怎么做才能防止这种情况发生？

Answer 1

您的SVG是内联元素，内联元素对代码中的空格敏感。删除代码中的空白，然后空格消失。

.svg-test {
  width: 400px;
}

.svg-test svg {
  height: 20px;
  width: 8.333333%;
  fill: #7a5c8e;
}

<div class="svg-test">
  <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
</div>

Answer 2

这是Web浏览器的默认行为。请阅读https://css-tricks.com/fighting-the-space-between-inline-block-elements/。

如果要删除元素之间的空格，只需向它们添加负边距

.svg-test 
{
  width: 400px;
  display: inline-block;
}

.svg-test svg {
  height: 20px;
  width: 8.333333%;
  fill: #7a5c8e;
  margin-left: -4px;
  margin-bottom: -4px;
}

<div class="svg-test">
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
    </div>