如何使 SVG 宽度响应但保持 SVG 高度不变?

Posted

技术标签:

【中文标题】如何使 SVG 宽度响应但保持 SVG 高度不变?【英文标题】:How to make SVG width responsive but keep SVG height unchanged? 【发布时间】:2021-02-10 15:59:35 【问题描述】:

目前我的 SVG 组件是响应式的。但是,我想保持 SVG 的高度固定为 352px,但只在调整窗口大小时减小宽度,以便用户可以看到我的 SVG 图片,否则当用户调整窗口大小时,SVG 图片会非常小。

有谁知道在为 SVG 组件调整窗口大小时如何在减小宽度的同时固定高度?

代码如下。

/* Carousel CSS */
.svg-container 
    width:100vw;
<div class="carousel-item active svg-container">
        <svg id="svg1" version="1.1" viewBox = "0 1 1365 352" preserveAspectRatio="xMidYMid meet">
            <line x1="0" y1="352px" x2="100%" y2="352px" stroke="rgba(76, 61, 104, 0.4)" stroke-/>
            <g class="kitchen" transform="translate(400,0)">
                <g class="kitchen-cabinet" stroke->
                    <rect x="50" y="0" rx="3" ry="3"   fill="none" stroke="rgba(76, 61, 104, 0.2)" filter="url(#f1)"/>
                    <line x1="137.5" y1="0" x2="137.5" y2="110" stroke="rgba(76, 61, 104, 0.15)" />
                    <defs>
                        <filter id="f1" x="0" y="0"  >
                        <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                        </filter>
                    </defs>
                </g>
                <g class="kitchen-table" stroke->
                    <polygon points="-5.5,200 295.5,200 290,205 0,205" stroke="rgba(76, 61, 104, 0.1)" fill="rgba(153, 102, 51, 0.5)"/>
                    <line x1="0" y1="265" x2="290" y2="265" stroke="rgba(76, 61, 104, 0.2)" />
                    <line x1="0" y1="205" x2="0" y2="100%" stroke="rgba(76, 61, 104, 0.3)" />
                    <line x1="290" y1="205" x2="290" y2="100%" stroke="rgba(76, 61, 104, 0.3)" />
                    <path id="kitchen-kettle" fill="rgba(76, 61, 104, 0.2)" d="M1136.74,509.923h-102.07c-3.036,0-6.035,0.782-8.664,2.257c-2.623,1.445-4.867,3.578-6.492,6.17L859.262,776.122
                    l-17.655-84.057c43.938-30.096,80.571-70.813,105.963-117.813c26.483-49.065,40.481-104.696,40.481-160.881
                    c0-65.256-18.516-128.539-53.546-183.009c-33.875-52.69-81.448-94.673-137.766-121.563c0.166-0.961,0.33-1.922,0.496-2.925
                    l0.466-2.79c1.075-6.449-0.691-13.101-4.972-18.726c-5.715-7.51-15.132-12.463-25.844-13.589
                    c-164.428-16.22-331.17-16.219-495.605,0.001c-10.705,1.125-20.123,6.077-25.838,13.588c-4.281,5.625-6.047,12.277-4.973,18.72
                    l0.433,2.644c0.17,1.031,0.329,2.022,0.486,3.012c-56.283,26.834-103.939,68.866-137.846,121.628
                    C68.515,284.833,50,348.116,50,413.371c0,56.184,13.998,111.815,40.481,160.882c25.508,47.21,62.334,88.063,106.586,118.256
                    l-74.045,352.551c-4.963,23.682,0.936,48.023,16.185,66.778c15.243,18.784,37.852,29.558,62.028,29.558h318.161h318.136
                    c24.167,0,46.784-10.772,62.055-29.558c15.231-18.766,21.121-43.107,16.16-66.778l-10.759-51.224
                    c63.816-0.731,108.188-47.532,135.596-143.067c13.684-47.695,21.321-99.839,28.06-145.845c4.112-28.069,7.995-54.58,12.613-74.716
                    c5.236-22.9,14.16-43.264,26.523-60.525c9.985-13.937,22.219-25.89,36.367-35.53c4.91-3.372,6.974-9.207,5.257-14.869
                    C1147.651,513.597,1142.68,509.923,1136.74,509.923z M188.251,1014.052c2.931-30.803,9.347-72.623,19.068-124.301
                    c16.52-87.817,37.172-174.998,37.38-175.867c0.788-3.323,4.12-5.38,7.447-4.589c3.324,0.789,5.379,4.124,4.589,7.447
                    c-0.201,0.846-20.287,85.638-36.64,172.028c-30.866,163.06-20.094,180.986-17.621,182.922
                    c24.801,11.26,234.416,13.742,313.081,13.742c3.417,0,6.186,2.769,6.186,6.186s-2.769,6.186-6.186,6.186
                    c-29.222,0-286.421-0.419-318.328-14.923C189.498,1079.371,183.061,1068.601,188.251,1014.052z M287.636,103.286
                    c2.78-0.396,280.087-39.395,465.474,0.072c3.342,0.712,5.474,3.997,4.763,7.339c-0.62,2.907-3.187,4.899-6.045,4.899
                    c-0.427,0-0.86-0.045-1.294-0.137c-183.222-39.007-458.383-0.324-461.141,0.072c-3.406,0.477-6.517-1.864-7.002-5.245
                    C281.907,106.905,284.254,103.77,287.636,103.286z M320.96,611.223c-2.992,0-5.487-2.124-6.062-4.946
                    c-0.081-0.401-0.124-0.815-0.124-1.24c0-0.423,0.043-0.836,0.124-1.235c0.572-2.825,3.068-4.951,6.062-4.951h364.451
                    c2.994,0,5.489,2.126,6.062,4.951c0.081,0.399,0.124,0.812,0.124,1.235c0,0.425-0.043,0.839-0.125,1.24
                    c-0.575,2.823-3.069,4.946-6.061,4.946H320.96z M633.6,1091.621c0,3.417-2.769,6.186-6.186,6.186h-49.281
                    c-3.417,0-6.186-2.769-6.186-6.186s2.769-6.186,6.186-6.186h49.281C630.83,1085.435,633.6,1088.204,633.6,1091.621z
                    M207.183,644.343c-33.961-26.496-62.124-60.789-81.499-99.319c-20.601-41.022-31.046-85.317-31.046-131.653
                    c0-54.592,15.022-107.793,43.441-153.854c27.179-44.094,65.552-80.124,111.045-104.339c0.001,0.008,0.003,0.016,0.004,0.024
                    l0.203,1.23c2.561,15.401,19.575,26.361,37.913,24.436c153.839-15.123,309.847-15.122,463.68-0.001
                    c1.411,0.149,2.813,0.221,4.201,0.221c16.683,0,31.353-10.435,33.695-24.646c0.071-0.406,0.131-0.803,0.196-1.206
                    c45.458,24.206,83.808,60.22,110.959,104.281c28.418,46.102,43.44,99.303,43.44,153.854c0,46.304-10.453,90.598-31.07,131.653
                    c-19.208,38.248-47.111,72.333-80.861,98.832l-4.962-23.628c-0.964-4.624-3.526-8.813-7.207-11.791
                    c-3.661-2.989-8.288-4.635-13.032-4.635h-53.733l-18.997-34.229c-1.775-3.191-4.396-5.876-7.58-7.765
                    c-3.19-1.875-6.82-2.867-10.499-2.867h-79.171l-14.413-24.214c-1.843-3.092-4.456-5.65-7.545-7.392
                    c-3.076-1.776-6.61-2.715-10.219-2.715h-52.967c-0.332-3.841-1.181-17.497,2.01-31.041c4.94-20.976,16.781-31.61,35.194-31.61
                    c9.092,0,17.169-1.908,24.005-5.671c5.699-3.138,10.571-7.621,14.48-13.328c4.341-6.365,4.707-14.256,0.979-21.111
                    c-3.731-6.832-10.574-10.913-18.308-10.913h-90.118h-90.144c-7.734,0-14.577,4.08-18.309,10.915
                    c-3.715,6.834-3.35,14.723,0.982,21.111c3.909,5.704,8.78,10.188,14.479,13.325c6.835,3.764,14.911,5.671,24.005,5.671
                    c18.445,0,30.285,10.635,35.194,31.61c3.187,13.53,2.339,27.198,2.009,31.041h-52.965c-3.609,0-7.143,0.939-10.208,2.709
                    c-3.1,1.748-5.714,4.306-7.556,7.397l-14.414,24.215h-77.612c-3.689,0-7.312,0.992-10.475,2.867
                    c-3.195,1.88-5.824,4.565-7.604,7.766l-18.997,34.227h-55.292c-4.743,0-9.371,1.646-13.027,4.631
                    c-3.685,2.981-6.248,7.17-7.213,11.793L207.183,644.343z" transform="scale(0.053) translate(350,2620)"/>
                    <g class="coffee-cup">
                        <g transform="translate(120,20)" style="fill:none;stroke:rgba(76, 61, 104, 0.3); stroke-width:2/5px;stroke-linecap:round;">
                            <path id="s1" d="M115,130 q6,6,1,9 t0,8" />
                            <path id="s2" d="M115,130 q6,6,1,9 t0,8" transform="translate(8,0)" />
                            <path id="s3" d="M115,130 q6,6,1,9 t0,8" transform="translate(16,0)" />
                        </g> 
                        <g transform="translate(223,165)" style="fill:rgba(76, 61, 104, 0.2);">
                        <path d="m 4.435,6.66 c 0.24,5.48 3.3455,19.43 6.9145,22.915 l 9.12,0 9.125,0 c 1.46,-1.455 2.075,-5.83 3.575,-9.6 0.61,-1.525 2.405,-8.38 2.73,-8.265 7.325,-1.41 4.72,10.095 -3.19,9.52
                                    -0.975,1.895 -1.705,3.845 -1.76,3.805 14.515,-4.01 14.125,-14.385 5.7985,-15.67 -0.44,-0.674 0.405,-2.08 0.175,-2.795 l -16.455,-0.45 z M -0.9995,29.895 c 1.1085,2.5585 5.11,4.03 7.325,4.49 l 14.705,0 14.7015,0 c 2.215,-0.4595 6.105,-1.81 7.2145,-4.37 l -20.62,0.235 z" />
                        </g>
                    </g>
                </g>
            </g>
            <g class="flowerpot" stroke="rgba(76, 61, 104, 0.4)" stroke- >
                <path fill="none" opacity="1"
                    d="M103,171 C 102,207 105,226 118,238 L183,238 C 195,228 200,205 198,170.5" transform="translate(750,113)"/>
                <line x1="852.5" y1="283.5" x2="948.3" y2="283.5" />
            </g>
            <g class="plant" stroke="rgba(76, 61, 104, 0.4)" stroke- >
                <line x1="900" y1="150" x2="900" y2="283.5" />
                <path fill="none" opacity="1" transform="translate(750,20)"
                      d="M149,244 C 135,240 120,246 100,217 C 126,218 137,228 150,244 C 164,224 172,219 191,218 C 183,239 169,241 150,244" />
                <path fill="none" opacity="1" transform="translate(750,15)"
                      d="M150,209 C 127,209 108,202 90,176 C 126,179 135,191 150,208 C 157,189 176,177 197,176 C 181,208 165,208 149,209" />
                <path fill="none" opacity="1" transform="translate(728,-10) scale(1.15)"
                      d="M150,168 C 133,166 122,159 114,148 C 130,149 141,153 150,167 C 155,151 166,148 178,145 C 170,163 159,167 150,168" />
            </g>
        </svg>
      </div>

【问题讨论】:

【参考方案1】:

这取决于你想要的行为。你还没有说清楚。

查看&lt;svg ... preserveAspectRatio="xMidYMid meet"&gt; 属性。

如果您希望 SVG 水平拉伸以填充宽度,则将其更改为:

preserveAspectRatio="none"

或者,如果您希望 SVG 扩展(放大)以填充宽度(这意味着图像的某些部分可能会从顶部和底部丢失),您可以使用:

preserveAspectRatio="xMidYMid slice"

有关preserveAspectRatio 属性的更多信息,see this section in the SVG specification。

【讨论】:

我将修改我的问题以使其更清晰。谢谢你提醒我:) 您更新的问题仍然不太清楚。但是我的回答解决了你的问题吗? 抱歉 Paul 的描述不清楚,但我尝试了你的答案,更改了 preserveAspectRatio 值,但没有帮助。我有一个示例网站:nasibov.me/about。在他的着陆页中,图片不会变短,只是宽度会改变。也许它会让你更清楚地了解我的问题 看起来该页面可以满足您的需求。 SVG 变得更窄,但高度保持不变。不正确怎么办? 你想让植物和猫靠近男人吗?

以上是关于如何使 SVG 宽度响应但保持 SVG 高度不变?的主要内容,如果未能解决你的问题,请参考以下文章

使用 CSS 更改 SVG Viewbox 大小

如何在 HTML5 中正确和响应地缩放 SVG?

如何使 svg 适合 html 的宽度和高度?

使用 VH 表示的高度对框 SVG 进行响应式拟合

如何在不改变高度的情况下让 SVG 具有流畅的宽度?

带有 viewBox 和宽度的 SVG 在 IE 中无法正确缩放高度