css - 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> element 是一个行内元素，与 <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>