曲线在反应中没有坚持到页面的最右边 [英] Curve is not sticking to the extreme right to the page in react

问题描述

这是图片:

为什么容器中的图片没有粘在容器的最右边，即使我给了float right or right:0，容器右侧总是有一个小间隙.这是一个 SVG 图像.

或者请任何人帮助我使用 CSS 中的剪辑路径方法设计这条曲线.

HTML 代码:

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

CSS 代码:

.Container {高度:500px；位置:相对；宽度:100%；}图像{最大宽度:100%；最大高度:100%；位置:相对；右:0；顶部:0；}.相交{最大宽度:100%；最大高度:100%；位置:绝对；浮动:对；}

图像的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.4875.2997D<181.4875.2997D<181.4875.1497Z<181.4875.14907"<定义><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"/></过滤器></defs></svg>

而且我需要让它响应，请任何人帮忙.

解决方案

你的 svg 有一个填充.使用属性 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.4875.2997D<181.4875.2997D<181.4875.1497Z<181.4875.14907"<定义><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"/></过滤器></defs></svg>

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.

解决方案

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>

这篇关于曲线在反应中没有坚持到页面的最右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！