Question

我不知道如何摆脱我的Codepen示例中的滚动条，有人可以看看我的SVG和CSS，看看是否可以删除滚动条而不破坏生成的图像。我需要使图像适合而没有滚动条，我认为重叠

<svg viewBox="0 0 500 800" width="100%"> 
  <defs>
    <pattern id="hexagons" width="100%" height="100%" >
      <g id="svg" fill="black" x="0" y="0"></g>    
    </pattern>
    <mask id="hexagon-halftone-mask" x="0" y="0" width="100%" height="100%" >  
     <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />

   </mask>
  </defs>

  <image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
</svg>

Answer 1

如果我理解正确，那么您想摆脱滚动条，但是您还需要图像以适合它。

对于第一部分，您必须添加：

overflow: hidden;

到您的身体CSS。这将隐藏滚动条，但不会阻止您的svg具有比窗口更大的高度并溢出。

因此，您要添加：

svg {
   max-height : 100%;
   width: 100%;
}

（我在此处而不是在HTML代码中放置宽度，因为这对我来说更有意义，但您也可以将其保留在此处，然后添加最大高度）

编辑：max-height是可选的，具体取决于项目中图片的大小/比率。这的确意味着一点之后，您的图像可能会小于屏幕的宽度。但是如果没有它，在您当前的Codepen中，图像将变得比框架的高度更高。

编辑2：codepen link，具有可调整的六边形尺寸，最小尺寸和间距。

Codepen上的svg有滚动条无法摆脱它

1 个答案: