简体   繁体   English

尝试将 svg 缩放到父容器

[英]Trying to scale svg to a parent container

I have been trying to scale SVG but failing to do so, I have banged my head enough but none of the solutions seem to work.我一直在尝试缩放SVG但没有这样做,我已经够头了,但似乎没有一个解决方案有效。 So basically it's a centered modal with SVG as the background.所以基本上它是一个以SVG为背景的居中模式。

I am trying the SVG to correctly fit the borders of the parent container, edge to edge.我正在尝试使SVG正确地适合父容器的边框,边缘到边缘。 Attaching the Design and code link below.附上下面的设计和代码链接。

Design设计

在此处输入图片说明

CodePen Link代码笔链接

 .modal { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 99999999; max-height: 100%; width: 80%; height: 80%; max-width: 100%; border: 2px solid black; box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2); } .svg-container { position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 100%; } svg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; }
 <div class="modal-hidden"> <div class="modal"> <div class="svg-container"> <svg viewBox="0 0 844 688" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <rect id="path-1" x="0" y="0" width="844" height="688" rx="10"></rect> <linearGradient x1="50%" y1="0%" x2="50%" y2="98.5140414%" id="linearGradient-3"> <stop stop-color="#8333D4" stop-opacity="0.499535621" offset="0%"></stop> <stop stop-color="#CE5DCB" stop-opacity="0.110276442" offset="100%"></stop> </linearGradient> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Sezzle-Desktop-Modal" transform="translate(-298.000000, -97.000000)"> <g id="Modal-Popup" transform="translate(298.000000, 97.000000)"> <g id="Desktop-Modal"> <g id="Modal-Background"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use> <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" points="705.472656 734 844 327 844 734"></polygon> <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" transform="translate(69.263672, 158.500000) rotate(-180.000000) translate(-69.263672, -158.500000) " points="0 362 138.527344 -45 138.527344 362"></polygon> <circle id="Oval" fill="#F08570" mask="url(#mask-2)" cx="10.5" cy="71.5" r="105.5"></circle> <circle id="Oval" fill="url(#linearGradient-3)" mask="url(#mask-2)" cx="808.5" cy="581.5" r="95.5"></circle> </g> </g> </g> </g> </g> </svg> </div> </div> </div>

I believe the key property you are looking for is preserveAspectRatio="none" , as well as width/height set on the svg element.我相信您正在寻找的关键属性是preserveAspectRatio="none" ,以及在 svg 元素上设置的宽度/高度。 I altered the CSS to reduce it to just what you need.我更改了 CSS 以将其减少到您需要的程度。 You'll need to set the size where you'd like it.您需要根据需要设置大小。 I simplified your svg file as well我也简化了你的 svg 文件

 html, body, .modal-hidden { width: 100%; height: 100%; } .modal-hidden { display: flex; justify-content: center; align-items: center; } .modal { box-shadow: 0 10px 20px rgba(5, 31, 52, 0.19), 0 6px 6px rgba(5, 31, 52, 0.2); height: 40%; width: 40%; } .svg-container { height: 100%; width: 100%; box-sizing: border-box; }
 <div class="modal-hidden"> <div class="modal"> <div class="svg-container"> <svg preserveAspectRatio="none" viewBox="0 0 844 688" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="path-1" x="0" y="0" width="844" height="688" rx="10"/> <linearGradient x1="0.5" y1="0" x2="0.5" y2="0.985140380859375" id="linearGradient-3"> <stop stop-color="#8333D4" stop-opacity="0.499535621" offset="0"/> <stop stop-color="#CE5DCB" stop-opacity="0.110276442" offset="1"/> </linearGradient> </defs> <mask id="mask-2" fill="white" stroke="none" stroke-width="1" fill-rule="evenodd"> <rect width="844" height="688" rx="10"/> </mask> <rect id="Mask" width="844" height="688" rx="10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"/> <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" points="705.5 734 844 327 844 734" stroke="none" stroke-width="1" fill-rule="evenodd"/> <polygon id="Path-2" fill="#FCD7B6" mask="url(#mask-2)" points="138.5 -45 0 362 0 -45" stroke="none" stroke-width="1" fill-rule="evenodd"/> <circle id="Oval" fill="#F08570" mask="url(#mask-2)" cx="10.5" cy="71.5" r="105.5" stroke="none" stroke-width="1" fill-rule="evenodd"/> <circle id="Oval" fill="url(#linearGradient-3)" mask="url(#mask-2)" cx="808.5" cy="581.5" r="95.5" stroke="none" stroke-width="1" fill-rule="evenodd"/> </svg> </div> </div> </div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM