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> является встроенным элементом, таким же, как элемент <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>

Answer 2

Реализуйте шашки как шаблон на фоне самого 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>