Curve is not sticking to the extreme right to the page in react

问题

This is the image:

Why the image in the container has not stuck to the extreme right of the container, even I have given float right or right:0 there is always a small gap in the right side of the container. It's an SVG image.

or please anyone help me to design this curve using the clip-path method in CSS.

HTML code:

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

CSS code:

.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 code of image:

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

And I need to make it responsive please anyone help.

回答1:

Your svg has a padding. Remove it by using attribute preserveAspectRatio="none".

Also, make sure that your container's parent also has 100% width of your screen.

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

来源：https://stackoverflow.com/questions/61627646/curve-is-not-sticking-to-the-extreme-right-to-the-page-in-react

标签

html

css

reactjs

svg