这个 SVG 文件有什么问题？答案

【问题标题】：What is wrong with this SVG file?这个 SVG 文件有什么问题？
【发布时间】：2020-01-20 09:34:19
【问题描述】：

谁能告诉我如何修复我的::before 元素的这个边距？任何margin: -2px 都不起作用，任何填充...当我调整页面大小时，边距仍然可见，一次在 img 顶部，一次在侧面... SVG 文件的侧面没有这条蓝线。

.container {
  background-color: #f7f7f7;
  height: 1000px;
  padding: 20px;
}

.media {
  position: relative;
  max-height: 408px;
  height: 155px;
  width: 200px;
  margin: 0 auto;
}

.media img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.media::before{
  content: "";
  background-image: url(https://svgshare.com/i/HRx.svg);
  position: absolute;
  background-position: center center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="container">
  <div class="media">
    <img src="https://i.imgur.com/iD4ERTU.jpg">
  </div>
</div>

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="513" viewBox="0 0 512 513"><defs><style>.a{fill:#f7f7f7;}.b{fill:#004fa3;}.c{clip-path:url(#a);}.d{fill:#2699fb;}.e{clip-path:url(#b);}.f,.h{fill:none;}.f{stroke:#0092ff;}.g{stroke:none;}</style><clipPath id="a"><rect class="a" width="512" height="513"/></clipPath><clipPath id="b"><ellipse class="b" cx="193.129" cy="193.129" rx="193.129" ry="193.129" transform="translate(511.391 163.225) rotate(115)"/></clipPath></defs><g class="c"><path class="d" d="M104.741,309.74S-53.3,342.253,18.88,249.888,133.249,220.239,185.7,134.716,186.843-3.264,266.665.158s6.842,255.431,6.842,255.431Z" transform="translate(315.585 237.501) rotate(129)"/><path class="a" d="M-962-168h-512V-680h512v512Zm-257.146-435.439a180.791,180.791,0,0,0-163.286,103.993,178.856,178.856,0,0,0-6.01,137.662,178.855,178.855,0,0,0,93.092,101.592,178.531,178.531,0,0,0,75.969,16.911h.014A180.775,180.775,0,0,0-1056.1-347.274c41.954-89.971,2.89-197.3-87.08-239.254A178.493,178.493,0,0,0-1219.146-603.439Z" transform="translate(1474 680)"/><g transform="translate(330.302 352.173)"><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(0 79.363)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(0 39.679)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(39.68)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(39.68 79.363)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(39.68 39.679)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(79.362)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(79.362 79.363)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(79.362 39.679)"/></g><g class="e"><g class="f" transform="translate(511.391 163.225) rotate(115)"><ellipse class="g" cx="193.129" cy="193.129" rx="193.129" ry="193.129"/><ellipse class="h" cx="193.129" cy="193.129" rx="192.629" ry="192.629"/></g><g transform="translate(330.302 352.173)"><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(0 79.363)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(0 39.679)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(39.68)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(39.68 79.363)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(39.68 39.679)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(79.362)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(79.362 79.363)"/><ellipse class="d" cx="3.691" cy="3.691" rx="3.691" ry="3.691" transform="translate(79.362 39.679)"/></g><g class="f" transform="translate(511.391 163.225) rotate(115)"><ellipse class="g" cx="193.129" cy="193.129" rx="193.129" ry="193.129"/><ellipse class="h" cx="193.129" cy="193.129" rx="192.629" ry="192.629"/></g></g></g></svg>

【问题讨论】：

我不知道您为什么要使用该背景图像，但您可以轻松创建一个 div 并为其赋予相同的颜色（更快），因为它可能是您的边缘视图框和宽度比高度小 1 像素，您可以尝试将它们更改为具有相同的值。我已经制作了一个带有您拥有codepen.io/DevKosov/pen/MWYzoWO的那种颜色的div背景的codepen
哦，好吧。在我看来，您应该将 SVG 视口更改为 `viewbox="0 0 512 512" 并从中删除高度和宽度，您应该会很好
它适用于我，因为您的 svg 文件中有宽度和高度属性我建议从 jakearchibald.github.io/svgomg 优化每个 svg 文件并检查我的 svg 文件版本codepen.io/DevKosov/pen/MWYzoWO
这是 svg res.cloudinary.com/devkosov/image/upload/v1579515102/…
嘿抱歉我在工作，由于您的容器背景颜色，侧面有边距，您可以做的是将 img 宽度和高度更改为 99%

标签： html css svg

【解决方案1】：

调整您的viewBox 大小，使其略小于灰色方块。目前，舍入和像素对齐，以及抗锯齿渗透，意味着下面的蓝色 JPEG 在边缘上略微可见。通过缩小 viewBox，我们有效地将灰色方块放大了一小部分，从而隐藏了渗透。

设置 `viewBox="1 1 510 511" （将 viewBox 每边缩小 1 个单位）
（可选） 删除width="512" height="513" 属性。

结果：

.container {
  background-color: #f7f7f7;
  height: 1000px;
  padding: 20px;
}

.media {
  position: relative;
  max-height: 408px;
  height: 155px;
  width: 200px;
  margin: 0 auto;
}

.media img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.media::before{
  content: "";
  background-image: url(https://svgshare.com/i/HPM.svg);
  position: absolute;
  background-position: center center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="container">
  <div class="media">
    <img src="https://i.imgur.com/iD4ERTU.jpg">
  </div>
</div>

【讨论】：