曲线在react中没有粘到页面的最右边。

Question

这就是图像。

为什么容器中的图像没有粘在容器的最右边 即使我给了浮动右键或右键:0 容器的右边总是有一个小缝隙。这是一个SVG图片。

或者谁能帮我用CSS中的clip-path方法设计这个曲线。

HTML代码。

<div className="Container">
  <div className="Img">
    <img src={Curve} className="intersect" />
  </div>
</div>

CSS代码：

.Container {
  height: 500px;
  position: relative;
  width: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  right: 0;
  top: 0;
}

.intersect {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  float: right;
}

图片的SVG代码。

<svg width="312" height="570" viewBox="0 0 312 647" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_d)">
    <path d="M111.684 14H312.453V605H306.088H134.021C70.667 543.769 28 428.795 28 297.056C28 181.475 60.8424 78.799 111.684 14Z" fill="#FCD400"/>
    </g>
    <defs>
    <filter id="filter0_d" x="0.383177" y="0.191588" width="339.687" height="646.234" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
    <feOffset dy="13.8084"/>
    <feGaussianBlur stdDeviation="13.8084"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
  </defs>
</svg>

而且我需要把它做成响应式的请大家帮忙。

Answer 1

你的svg有一个padding。通过使用属性删除它 preserveAspectRatio="none".

另外，请确保您的 container'的父体也有100%的屏幕宽度。

<svg preserveAspectRatio="none" width="312" height="570" viewBox="0 0 312 647" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M111.684 14H312.453V605H306.088H134.021C70.667 543.769 28 428.795 28 297.056C28 181.475 60.8424 78.799 111.684 14Z" fill="#FCD400"/>
</g>
<defs>
<filter id="filter0_d" x="0.383177" y="0.191588" width="339.687" height="646.234" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="13.8084"/>
<feGaussianBlur stdDeviation="13.8084"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>