svg在包含div内略有移位

Question

我正在尝试构建一个颜色选择器。我想在不透明选择器下面设置方格图案，所以我决定将svg组件放入div中，并为其附加背景颜色。

无论我是否向div中添加样式，svg都是在其容器中位移了几个像素，而我看不到如何解决该问题。 （换句话说，我可以关闭所有样式，但问题仍然存在，只是当背景为白色时您不会注意到它）

<div class="opacity-picker" style="background-image: linear-gradient(45deg, rgb(128, 128, 128) 25%, transparent 25%), linear-gradient(-45deg, rgb(128, 128, 128) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(128, 128, 128) 75%), linear-gradient(-45deg, transparent 75%, rgb(128, 128, 128) 75%); background-size: 12px 12px; background-position: 0px 0px, 0px 6px, 6px -6px, -6px 0px; width: 200px; height: 12px;"><svg width="100%" height="100%"><defs><linearGradient id="gradient-opacity" x1="100%" y1="0%" x2="0%" y2="0%"><stop offset="0%" stop-color="rgba(0%,100%,100%,1)" stop-opacity="1"></stop><stop offset="100%" stop-color="rgba(0%,100%,100%,1)" stop-opacity="0"></stop></linearGradient></defs><rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-opacity)"></rect></svg></div>

Answer 1

在SVG本身的背景中将检查器作为一种模式实施。

div {
  width: 200px;
  height: 12px;
}
pattern {
  fill: #888;
  opacity: 0.25;
}

<div class="opacity-picker">
  <svg width="100%" height="100%">
    <defs>
      <pattern id="pattern-background" patternUnits="userSpaceOnUse" width="12" height="12">
        <rect y="6" width="6" height="6" />
        <rect x="6" width="6" height="6" />
      </pattern>
      <linearGradient id="gradient-opacity" x1="100%" y1="0%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="rgba(0%,100%,100%,1)" stop-opacity="1"></stop>
        <stop offset="100%" stop-color="rgba(0%,100%,100%,1)" stop-opacity="0"></stop>
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-background)"></rect>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-opacity)"></rect>
  </svg>
</div>

Answer 2

<svg>元素是一个内联元素，与<img>元素相同。因此，默认情况下会将其放置为好像位于一行文本的基线上。因此，在其下方将留有空格，用于存放降序字符（例如g，j等）。

解决方案是将SVG设置为display: block。

svg {
  display: block;
}

<div class="opacity-picker" style="background-image: linear-gradient(45deg, rgb(128, 128, 128) 25%, transparent 25%), linear-gradient(-45deg, rgb(128, 128, 128) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(128, 128, 128) 75%), linear-gradient(-45deg, transparent 75%, rgb(128, 128, 128) 75%); background-size: 12px 12px; background-position: 0px 0px, 0px 6px, 6px -6px, -6px 0px; width: 200px; height: 12px;"><svg width="100%" height="100%"><defs><linearGradient id="gradient-opacity" x1="100%" y1="0%" x2="0%" y2="0%"><stop offset="0%" stop-color="rgba(0%,100%,100%,1)" stop-opacity="1"></stop><stop offset="100%" stop-color="rgba(0%,100%,100%,1)" stop-opacity="0"></stop></linearGradient></defs><rect x="0" y="0" width="100%" height="100%" fill="url(#gradient-opacity)"></rect></svg></div>