css - SVG 形状分隔线的对齐问题

标签 css svg

<分区>

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 3 年前。

Improve this question

我正在尝试用我自己的 SVG 复制非常流行的形状分隔线。

我在 Illustrator 中创建了一个 SVG，在 Inkscape 中创建了一个类似的版本。两者都存在与底部对齐的相同问题:它与后面的 div 之间存在微小的差距。

Example of the gap

此行为是我的 SVG 独有的，我在互联网上发现的其他人没有此问题。

该部分的边距设置为 0，更改 #section-2-55348 svg 的 CSS 高度会更改间隙的大小。

#section-2-55348 {
  position: relative;
  overflow: hidden;
}

#section-2-55348 svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: #003767;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path  d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>

最佳答案

在下一个示例中，svg{display:block;} 造成了不同。我希望这就是您所需要的。

*{margin:0; padding:0;}
svg{fill: #003767;display:block;}
div{background:#003767;min-height:5em;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 40" style="enable-background:new 0 0 1920 40;" xml:space="preserve">
<path  d="M0,18.5c0,0,415.4,34.9,956.3-1.9s963.7-0.9,963.7-0.9V40H0L0,18.5z"/>
</svg>
<div></div>

关于css - SVG 形状分隔线的对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59428684/

上一篇：javascript - 触摸图像 slider : next/prev keys interfere with code for current slide

下一篇：css - 无法解析 'css-loader' - Webpack 入门错误

javascript - d3Service/d3-ng2-service TypeScript TS2346 提供的参数与签名不匹配

svg - 'M' 、 'c' 和 'z' 在 SVG 路径中是什么意思？

html - Bootstrap : responsive button in grid system?

css - W3C 的 "Semantic Data Extractor"在语义正确的 XHTML CSS 开发中有什么用处？

javascript - 来自正方形的矩阵与 JavaScript

html - 用 SVG 替换文本中的星号 (*)？

html - 如何剪辑 SVG 图？

javascript - 使用 javascript/jquery 从未计算的 css 样式中获取值

css - float 元素和 div 在 IE 中显示不同