如何解决SVG和div
这不是我可以找到的任何当前问题的重复。我已经尝试过诸如将block / flex添加到SVG元素之类的答案,但是我相信这是不同的。
如果有任何意义,我正在使用Tailwind。
这是此问题所在的多个不同的SVG之一:
<svg style="width: 100%" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" y="0px" x="0px" xml:space="preserve" version="1.1" viewBox="0 0 1917.4503 99.737572" id="Untitled-Page%201">
<metadata id="metadata64">
<rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:work></rdf:rdf>
</metadata>
<defs id="defs62">
<clipPath id="clipPath83" clipPathUnits="userSpaceOnUse">
<rect y="4.6582928" x="1.9868355" height="520.61298" width="1913.6428" id="rect85" style="fill: #0000ff; fill-rule: evenodd"></rect>
</clipPath>
<clipPath id="clipPath101" clipPathUnits="userSpaceOnUse">
<rect y="2.0105031" x="1.6986296" height="99.737572" width="1917.4503" id="rect103" style="fill: #0000ff; fill-rule: evenodd"></rect>
</clipPath>
</defs>
<g transform="translate(-1.6986296,-2.0105031)" clip-path="url(#clipPath101)" id="g79">
<path id="110" d="m -92.8182,485.3333 c 148.4834,-10.021 80.7045,-8.8997 264.4613,-8.8997 211.3321,0 442.2889,49.5664 666.4687,49.5664 255.8733,0 518.9805,-59.2854 737.5684,-59.2854 335.3557,0 441.894,29.1565 441.894,29.1565 L 2035,256 c 0,0 -38.1606,11.5786 -106.04,22.415 L 1919,33.9229 c 0,0 -67.2518,32.8281 -278.9438,32.8281 C 1502.0735,66.751 1335.988,0 1174.4691,0 1032.9564,0 887.1659,55.8081 753.7633,55.8081 619.0213,55.8081 489.1034,1.0942 387.7024,1.0942 230.6074,1.0942 -14,33.9229 -14,33.9229 l -0.0303,192.3195 c 0,0 -30.8519,-4.4524 3.0303,-5.3425 v 77.905 c -115.2449,9.8118 -4.7734,-2.7802 -103.0303,4.7102" fill="#4d5061"></path>
</g>
</svg>
我使用了多个SVG元素来创建类似波浪的效果。在下面的图片中,您可以看到SVG的顶部,在其下方可以看到内容的背景。
此问题仅在某些分辨率下出现,并且线的粗细在看起来半个像素和一个高度为1像素之间变化。
当SVG内联或作为IMG时,都会发生此行为。 SVG本身的样式为宽度为100%,高度设置为自动。
我注意到调整视图框可以使SVG正确对齐,但这只会使间隙显示在不同的分辨率上。
我需要一种解决方案,以使这波SVG在所有设备上都齐平放置,而没有像素间隙,并且理想地解释为什么它会以这种方式工作,因为我对此一直against之以鼻。
有多个SVG,并且所有这些均会发生此问题。
解决方法
通过在SVG元素的顶部或底部添加-1px边距以将元素重叠在一起来解决此问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。