代码之家 › 专栏 › 技术社区 › Simon H

svg在包含的div中稍微移位

svg css

Simon H · 技术社区 · 6 年前

我想做一个颜色选择器。我想在不透明度选取器下面有一个方格图案,所以我决定把我的svg组件放在一个div中,并将背景颜色附加到这个div中。

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

2 回复 | 直到 6 年前

Paul LeBeau 6 年前

这个 <svg> 元素是内联元素,与 <img> 元素。因此,默认情况下,它将被放置在一行文本的基线上。所以在它下面会留有空间给下一个字符(比如g,j等等)。

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>

ccprog 6 年前

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>