如何使 BootStrap“carousel-item”类中的 HTML SVG 代码在移动屏幕和小屏幕中响应？
Posted
技术标签:
【中文标题】如何使 BootStrap“carousel-item”类中的 HTML SVG 代码在移动屏幕和小屏幕中响应？【英文标题】：How to make HTML SVG code within BootStrap "carousel-item" class responsive in mobile screen and small screen? 【发布时间】：2021-02-09 05:29:09 【问题描述】：我有一段代码，它是一大块 html svg，描绘了我想用 HTML 绘制的图片。这个大代码块位于 BootStrap“carousel-item”类中，如下所示。但是，当我尝试预览效果时，我发现在调整屏幕大小或在移动屏幕中时它无法响应。
例如，当我试图查看我在手机中绘制的图片时，我看不到它，因为像素对轮播类没有响应。尽管 carousel 本身是响应式的，但 SVG 部分却不是。
我还没有在 CSS 中添加任何东西。
代码如下。
<div class="carousel-item active svg-container" style="height:352px;">
<svg version="1.1" preserveAspectRatio="none">
<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 具有响应性，您应该设置 width=100% 并设置 Svg 元素的 Viewbox 属性 例如
<svg viewBox="0 0 1000 1000" >
....
</svg>
这是你的固定代码
<div class="carousel-item active svg-container" style="height:352px;">
<svg viewBox="0 0 1000 1000" version="1.1" preserveAspectRatio="none">
<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>【讨论】：
【参考方案2】：要使您的应用程序具有响应性，您需要进行一些代码更改：
-
而不是
y2 = "100%" 设置y2 = "352"
<line x1="0" y1="205" x2="0" y2="352" stroke="rgba(76, 61, 104, 0.3)" />
<line x1="290" y1="205" x2="290" y2="352" stroke="rgba(76, 61, 104, 0.3)" />
从 SVG 样式中移除 style = "height: 352px;" - 固定大小会阻止应用程序响应
删除preserveAspectRatio ="none"，因为这违反了边的比例变化
SVG 中的默认值为preserveAspectRatio =" xMidYMid meet "
添加viewBox = "0 0 1365 352"
将width 和height 以相对单位添加到父容器.svg-container
.svg-container
width:100vw;
height:100vh;
<div class="carousel-item active svg-container" >
<svg id="svg1" viewBox="0 0 1365 352 " version="1.1" >
<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="352" stroke="rgba(76, 61, 104, 0.3)" />
<line x1="290" y1="205" x2="290" y2="352" 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>
<script>
let bb = svg1.getBBox();
console.log(bb);
</script>【讨论】：
非常感谢。你帮我解决我的问题：）它确实有效！ 我有兴趣学习如何做到这一点。其实我还有一个关于响应式 svg 的问题，你是 svg 专家吗？ :D @RouyuChen 因为它适合你，你可以问一个关于适应性 SVG 的单独问题。关于动画我会在这个话题中回答 这很酷，我对 *** 还是很陌生，所以我仍在学习如何有效地使用它。不管怎样，很高兴在这里见到你！我将很快提出一个关于响应式 SVG 的单独问题。 p.s.我不知道如何在***中关注某人，我想给你流量，哈哈:) @Gloria Chen 找一个***用户并不难 选择左侧边栏中的“用户”，输入会员昵称你改名字和头像了吗？【参考方案3】：对象动画
使用了两种动画：
-
stroke-dashoffset 从最大行长度更改为零
用于绘制厨房物品线条的轮廓
动画填充 - 用于绘制对象
我将向您展示两种动画在一个主题上的工作原理。
<div class="carousel-item active svg-container" >
<svg id="svg1" viewBox="0 0 1365 352 " version="1.1" >
<line x1="0" y1="352px" x2="100%" y2="352px" stroke="rgba(76, 61, 104, 0.4)" stroke-/>
<g class="coffee-cup" transform="scale(3) translate(-120,-120)">
<g transform="translate(120,20)" style="fill:none;stroke:rgba(76, 61, 104, 0.3); stroke-width:2/5px;stroke-linecap:round; stroke-dasharray:21; stroke-dashoffset:21;">
<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)" />
<!-- Smoke animation above the cup -->
<animate id="an_smoke" attributeName="stroke-dashoffset" begin="an_fill_cup.end-0.5s" dur="1s" values="21;0" fill="freeze" restart="whenNotActive" />
</g>
<g transform="translate(223,165)" style="stroke:rgba(76, 61, 104, 0.2);fill:none;stroke-dasharray:234;stroke-dashoffset:234">
<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" >
<!-- Animation of drawing the contours of a cup -->
<animate id="an_cup_body" attributeName="stroke-dashoffset" begin="svg1.click" dur="3s" values="234;0" fill="freeze" restart="whenNotActive" />
<!-- Cup fill animation -->
<animate id="an_fill_cup" attributeName="fill" begin="an_cup_body.end-1s" dur="1s" from="transparent" to="rgba(76, 61, 104, 0.2)" fill="freeze" restart="whenNotActive" />
</path>
</g>
</g>
<text x="100" y="100" font-size="36px" fill="black">Click me </text>
</svg>
</div> <!-- Animation of drawing the contours of a cup -->
<animate id="an_cup_body" attributeName="stroke-dashoffset"
begin="svg1.click" dur="4s" values="234;0" fill="freeze" restart="whenNotActive" />
使用此动画，stroke-dashoffset 从等于 234px 行长度的最大值减小到零。因此，这条线将从零到最大值绘制
<!-- Cup fill animation -->
<animate id="an_fill_cup" attributeName="fill"
begin="an_cup_body.end-1s" dur="1s" from="transparent" to="rgba(76, 61, 104,.2)"
fill="freeze" restart="whenNotActive" />
颜色从透明变为灰色的动画
应用中其他item的动画实现方式相同。
下面是完整的代码：
.svg-container
width:100vw;
height:100vh;
<style>
.svg-container
width:100vw;
height:100vh;
</style>
<div class="carousel-item active svg-container" >
<svg id="svg1" viewBox="0 0 1365 352 " version="1.1" >
<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="352" stroke="rgba(76, 61, 104, 0.3)" />
<line x1="290" y1="205" x2="290" y2="352" stroke="rgba(76, 61, 104, 0.3)" />
<path id="kitchen-kettle" fill="none" stroke- stroke="rgba(76, 61, 104, 0.2)" stroke-dashoffset="5000" stroke-dasharray="5000" 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)">
<!-- Teapot outline drawing animation -->
<animate id="an_kettle" attributeName="stroke-dashoffset" begin="svg1.click" dur="4s" values="5000;0" fill="freeze" restart="whenNotActive" />
<!-- Teapot Grayscale Animation -->
<animate attributeName="fill" begin="an_kettle.end-1s" dur="1s" from="transparent" to="rgba(76, 61, 104, 0.2)" fill="freeze" restart="whenNotActive" />
</path
<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; stroke-dasharray:21; stroke-dashoffset:21;">
<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)" />
<!-- Smoke animation above the cup -->
<animate id="an_smoke" attributeName="stroke-dashoffset" begin="an_fill_cup.end" dur="1s" values="21;0" fill="freeze" restart="whenNotActive" />
</g>
<g transform="translate(223,165)" style="stroke:rgba(76, 61, 104, 0.2);fill:none;stroke-dasharray:234;stroke-dashoffset:234">
<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" >
<!-- Animation of drawing the contours of a cup -->
<animate id="an_cup_body" attributeName="stroke-dashoffset" begin="svg1.click" dur="4s" values="234;0" fill="freeze" restart="whenNotActive" />
<!-- Cup fill animation -->
<animate id="an_fill_cup" attributeName="fill" begin="an_cup_body.end-1s" dur="1s" from="transparent" to="rgba(76, 61, 104, 0.2)" fill="freeze" restart="whenNotActive" />
</path>
</g>
</g>
</g>
</g>
<g class="flowerpot" stroke="rgba(76, 61, 104, 0.4)" stroke- stroke-dasharray="207" stroke-dashoffset="207" >
<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" />
<animate id="an_flower" attributeName="stroke-dashoffset" begin="an_smoke.end" dur="1s" values="207;0" fill="freeze" restart="whenNotActive" />
</g>
<g class="plant" stroke="rgba(76, 61, 104, 0.4)" stroke- stroke-dasharray="265" stroke-dashoffset="265">
<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" />
<animate id="an_plant" attributeName="stroke-dashoffset" begin="an_flower.end" dur="2s" values="265;0" fill="freeze" restart="whenNotActive" />
</g>
</svg>
</div>
【讨论】：
@Gloria Chen 我做到了我的承诺。请看动画版。现在您有机会，如果您喜欢答案，请投票以上是关于如何使 BootStrap“carousel-item”类中的 HTML SVG 代码在移动屏幕和小屏幕中响应？的主要内容，如果未能解决你的问题，请参考以下文章