如何使 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】：这取决于你想要的行为。你还没有说清楚。
查看<svg ... preserveAspectRatio="xMidYMid meet"> 属性。
如果您希望 SVG 水平拉伸以填充宽度，则将其更改为：
preserveAspectRatio="none"
或者，如果您希望 SVG 扩展（放大）以填充宽度（这意味着图像的某些部分可能会从顶部和底部丢失），您可以使用：
preserveAspectRatio="xMidYMid slice"
有关preserveAspectRatio 属性的更多信息，see this section in the SVG specification。
【讨论】：
我将修改我的问题以使其更清晰。谢谢你提醒我:) 您更新的问题仍然不太清楚。但是我的回答解决了你的问题吗？ 抱歉 Paul 的描述不清楚，但我尝试了你的答案，更改了 preserveAspectRatio 值，但没有帮助。我有一个示例网站：nasibov.me/about。在他的着陆页中，图片不会变短，只是宽度会改变。也许它会让你更清楚地了解我的问题 看起来该页面可以满足您的需求。 SVG 变得更窄，但高度保持不变。不正确怎么办？ 你想让植物和猫靠近男人吗？以上是关于如何使 SVG 宽度响应但保持 SVG 高度不变？的主要内容，如果未能解决你的问题，请参考以下文章