将嵌入的 SVG 缩放到父 div

Question

我试图使 SVG 图像具有与父 div 相同的大小。减小 svg 的宽度和高度只会截断图像，所以我没有触及这些。我尝试过设置视图框，但没有任何效果。我完全没有主意了。<div style="width: 300px; height: 50px">        <svg width='2524.56' height='327'>            <defs>                <filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">                    <feFlood x="0%" y="0%" width="100%" height="100%" flood-color='#006CE5' flood-cpacity="0.5" />                    <feOffset dx='0.5' />                    <feComposite operator="in" in2="SourceGraphic" />                    <feComposite operator="over" in2="SourceGraphic" />                </filter>            </defs>            <path                strokeWidth='0'                fill='white'                filter="url(#fillpartial)"                fill-rule='evenodd'            />        </svg>    </div>

Answer 1

你快到了。删除width和height，设置viewBox：

<div style="width: 300px; height: 50px">

        <svg viewBox="0 0 2524.56 327">

            <defs>

                <filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">

                    <feFlood x="0%" y="0%" width="100%" height="100%" flood-color='#006CE5' flood-cpacity="0.5" />

                    <feOffset dx='0.5' />

                    <feComposite operator="in" in2="SourceGraphic" />

                    <feComposite operator="over" in2="SourceGraphic" />

                </filter>

            </defs>

            <path

                strokeWidth='0'

                fill='white'

                filter="url(#fillpartial)"

                fill-rule='evenodd'

                d='M54.213,303.344L42.165,315.393l12.048,12.044,5.474-5.474,6.571-6.57-6.571-6.573ZM129.5,276.237L117.46,288.289l12.047,12.046h0l12.047-12.049-12.048-12.045ZM278.777,92.28l-7.084-26.432-1.955-7.292L265.152,41.42l-33.711-9.032L188.869,74.959l-6.728,6.726-42.57,42.565,5.2,19.394,1.883,7.027,31.722,8.5,19.352-19.35,31.4-31.4,0.771,2.879,9.272,34.6-12.825,12.829-5.144,5.137-32.695,32.7-25.351-6.79-6.489-1.744L153.9,187.3l-24.393-6.536-10.213-2.737-9.273-34.605-9.271-34.6L128.1,81.464l1.4-1.4,64.455-64.483L162.147,7.05,135.832,0l-6.325,6.325L112.524,23.31,85.172,50.662,70.393,65.444l-0.417.416-0.338.337-9.951,9.95L42.6,93.239l6.118,22.835-22.72,22.72-0.287.287,0.287,0.287L37.75,151.129l16.06-16.051,1.18-1.181,4.7-4.7,3.436-3.436-2.091,2.093L59.687,129.2l-4.678,4.681A8.541,8.541,0,0,1,67,133.822l0.11,0.111a8.541,8.541,0,0,1-.051,11.992l6.021-6.023-6.039,6.044-7.352,7.347-0.789.788L28.727,184.254,40.773,196.3l12.105-12.1,6.809-6.81,0.9-.9,3.293-3.288,0.024-.031,0.027-.024,0.028-.028,0.026-.031,3.18-3.177a8.519,8.519,0,1,1,12.045,12.05l-0.021.028-0.029.027-0.027.027-3.127,3.124-0.027.03-0.026.025-0.029.025-0.026.028-0.027.026-0.026.026-3.129,3.129-0.026.027-0.026.026-0.027.027-3.56,3.558-4.155,4.157-5.239,5.239L30.644,230.526l12.047,12.052,17-17,14.487-14.488,9.226-9.226,0,0,0.7-.7,0.029-.025,0.024-.027,0.027-.026a8.518,8.518,0,0,1,12.706,11.305l0.609-.609,0.021-.018,0.022-.021,0.024-.027,0.028-.024,0.025-.031,3.128-3.127,0.03-.029,0.023-.025,0.027-.027,0.028-.029,0.027-.022,0.024-.028,1.307-1.307,0.039,0.039-2.466,2.466-3.378,3.376-0.178.182-0.027.029-0.026.027-0.029.026-3.127,3.128L93,216.37l-0.024.026-0.029.026-0.027.029-0.023.024-0.031.029-3.127,3.127-0.024.029-0.029.024-0.027.027-0.019.023-0.022.018-2.091,2.093,0,0-1.3,1.3L74.18,235.182l12.05,12.05,7.31-7.312v0l3.535-3.531,0.025-.028,0.029-.025,0.028-.028,3.125-3.129,0.028-.027,0.026-.026,0.029-.024,0.027-.031,0.026-.027,0.027-.024,1.82-1.818,1.023-1.025,0.019-.02,0.01-.007,0.022-.023,0.016-.018,0.027-.026,0.024-.029,3.131-3.122,0.027-.03,0.026-.027,0.029-.027,0.026-.026,0.027-.026,0.026-.027,3.126-3.131,0.028-.026,0.025-.025,0.029-.026A8.518,8.518,0,1,1,121.954,235.6l-0.028.028-0.025.027-0.029.025-3.128,3.129-0.026.028-0.027.025-0.027.027-0.028.026-0.023.027-0.03.027-2.748,2.749-0.132.136-0.029.026-0.027.026-0.011.011-0.18.179-0.026.031-0.026.025-0.027.026-0.02.024-0.023.015-2.092,2.094-0.749.751-0.027.027-0.028.025-0.025.028-0.028.025-0.025.029-0.025.027-3.132,3.127-0.026.026-0.027.027-0.024.028-3.533,3.533L68.7,288.851,80.751,300.9l48.756-48.756L140.39,241.26l2.844-2.843,3.586-3.588,0.029-.026,0.025-.026,0.026-.027,3.128-3.124,0.025-.028,0.026-.025,0.029-.027,0.028-.028,0.022-.027,0.027-.028,3.129-3.126,0.028-.028,0.025-.027,0.03-.027A8.519,8.519,0,0,1,165.444,240.3l-0.029.029-0.025.026-0.028.026-3.126,3.128-0.027.026-0.024.028-0.031.027-0.029.026-0.024.025-0.03.028-3.123,3.129-0.03.027-0.023.027-0.028.028-6.43,6.424L139.893,265.85,151.945,277.9l29.3-29.3,22.906,6.138,22.12-22.119,0.015-.017c3.233-3.187,6.586-6.664,10.221-10.3l10.148-10.154,32.7-32.7,17.969-17.966L280.257,97.8ZM59.687,273.772l12.046-12.048L59.687,249.678l0,0L47.64,261.724l12.046,12.048h0ZM25.181,163.7l-12.05-12.048L1.085,163.7l12.05,12.048ZM0,261.175l12.047,12.047L24.1,261.172,12.043,249.129Zm14.233-62.426L2.185,210.792l12.052,12.05,11.758-11.76,0.286-.286-0.286-.286ZM1874.7,175.236h-40.95l40.66-73.374h2.28l38.97,73.374H1874.7Zm0-110.348h-38.68L1729.94,262.266h57.45l25.03-47.494h124.56l25.03,47.494h57.45L1913.66,64.888H1874.7ZM1662.54,179.22q0,26.165-8.82,34.98t-35.83,8.815h-88.17V104.138h88.17q26.16,0,35.83,9.669,8.82,8.819,8.82,32.422V179.22ZM1625.57,64.888H1480.24V262.55h149.59q47.505,0,64.71-16.924t17.2-64.13V143.381q0-44.079-19.06-61.285T1625.57,64.888Zm466.27,43.088c4.08-2.556,10.04-3.838,17.82-3.838h82.95c10.05,0,16.78,1.186,20.1,3.553s4.98,6.685,4.98,12.945h52.89q0-28.447-18.77-42.093t-57.16-13.655h-90.16q-40.095,0-57.02,12.942t-16.92,44.226q0,35.26,17.02,46.359,14.5,9.382,58.82,9.385l78.64,3.124c13.27,0,22.42,1.9,27.54,5.691q6.525,4.832,6.53,16.211t-7.53,15.639q-7.53,4.264-24.6,4.266h-82.19q-10.815,0-17.49-4.548t-6.69-11.945h-50.05q0,29.289,15.5,42.66t53.61,13.368h101.82q38.385,0,53.74-13.94t15.36-46.072q0-36.972-17.63-49.484-13.935-9.953-52.33-9.955l-91.01-3.412q-12.51,0-17.35-2.556-6.54-3.414-6.54-14.222T2091.84,107.976Zm383.51-43.088v75.657H2348.79V64.888h-49.48V262.266h49.48v-82.2h126.56v82.2h49.2V64.888h-49.2ZM520.679,189.176H622.207q0,32.417-9.951,42.657t-42.093,10.239H491.1q-42.945,0-55.173-13.651-11.66-12.8-11.66-56.6v-18.2q0-43.79,13.934-57.023,13.941-13.216,58.3-13.222h73.661q24.175,0,36.406,5.973,17.06,8.247,17.064,29.578h21.612q0-56.025-75.082-56.028H499.637q-55.176,0-75.369,17.915-21.61,19.059-21.618,73.092v17.918q0,54.325,18.347,72.38t72.666,18.062h76.5q34.694,0,51.191-9.957,15.355-9.1,20.476-30.714,3.7-15.643,3.7-52.9H520.679v20.479ZM781.614,194.3H719.188L781.471,79.4l0.143,0.264L844.037,194.3H781.614Zm0-129.407H764.977l-107.5,197.379h24.175l25.88-47.494H854.85l25.877,47.494h25.027L798.248,64.888H781.614Zm478.5,197.379h184.3V241.79H1281.73v-71.1h157.56V150.21H1281.73V85.369h162.68V64.888h-184.3V262.266Zm-185.42-29.013L972.587,64.888H923.953V262.266h21.33V80.532h11.662l109.5,181.734h14.79L1192.71,80.532h11.66V262.266h21.33V64.888h-46.07Z'

            />

        </svg>

    </div>