CODEWITHSUNDEEP
csssvg
Simon H
Simon H

Reputation: 21007

svg slightly displaced within containing div

I'm trying to build a colour picker. I want to have the checkered pattern beneath the opacity picker, so I decided to put my svg component inside a div, and to attach the background colour to that.

Whether or not I add styles to the div, the svg is a couple of pixels displaced within its container, and I can't see how to fix that. (In other words I can turn off all the styling and the problem still exists, except that you don't notice it when the background is white)

<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>

svg

Upvotes: 0

Views: 350

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101830

The <svg> element is an inline element, the same as an <img> element. So by default it will be placed as if it is sitting on the baseline of a line of text. So there will space left below it for descender characters (like g, j, etc).

The solution is to set the SVG to 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>

Upvotes: 2

ccprog
ccprog

Reputation: 21821

Implement the checkers as a pattern in the background of the svg itself.

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>

Upvotes: 2

Related Questions