Как убрать пустой промежуток в svg?

Question

[olya_097]

https://jsbin.com/jicukiheka/1/edit?html,css,js,output

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/yLQQOrd

<svg xmlns="http://www.w3.org/2000/svg" width="305" viewBox="0 0 244 51" fill="none">


<g filter="url(#filter0_dii_618_508)">
<rect x="2" y="0" width="241" height="50" rx="10" fill="#EB1A7E" shape-rendering="crispEdges"/>
<rect x="2" y="0" width="241" height="50" rx="10" fill="url(#paint0_linear_618_508)" fill-opacity="0.2" shape-rendering="crispEdges"/>
<rect x="2" y="0" width="241" height="50" rx="10" fill="url(#paint1_radial_618_508)" fill-opacity="0.4" shape-rendering="crispEdges"/>
<rect x="2" y="0" width="239" height="48" rx="9" stroke="url(#paint2_radial_618_508)" stroke-opacity="0.5" stroke-width="2" shape-rendering="crispEdges"/>
</g>


<defs>
<filter id="filter0_dii_618_508" x="0" y="0" width="305" height="114" 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" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="16"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.760784 0 0 0 0 0.0666667 0 0 0 0 0.4 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_618_508"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_618_508" result="shape"/>
<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" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.47 0"/>
<feBlend mode="overlay" in2="shape" result="effect2_innerShadow_618_508"/>
<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" result="hardAlpha"/>
<feOffset dy="-3"/>
<feGaussianBlur stdDeviation="6"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect2_innerShadow_618_508" result="effect3_innerShadow_618_508"/>
</filter>
<linearGradient id="paint0_linear_618_508" x1="162" y1="78" x2="163" y2="28" gradientUnits="userSpaceOnUse">
<stop stop-opacity="0.56"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint1_radial_618_508" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(158 22.6429) rotate(90) scale(39.881 103.443)">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="paint2_radial_618_508" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120 28) rotate(41.0585) scale(190.308 51.3266)">
<stop stop-color="white"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>

Размер ректов на много меньше чем размер канвас, исправил

Comments

[olya_097]

Максим , а снизу что появилось?

[Максим]

olya_097, не знаю как там сохранить, скинул кодом