我在 SVG 中使用 image 标签将网站屏幕截图包含在我个人网站的模型中。当我使用 Chrome 访问我的网站时没有问题，但使用 Firefox 或 Safari 时，我遇到了一些问题。
它是这样工作的:我定义了一个 SVG mask，image 使用该 mask 位于“屏幕”中，图像高度为 auto 很好地展示。这是一个片段:
<svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39">
<defs>
<filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2">
<feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset>
<feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.04"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop>
</linearGradient>
<filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0"></stop>
<stop offset="1" stop-color="#fff"></stop>
</linearGradient>
<linearGradient
id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd"
data-name="Dégradé sans nom 3"
x1="743.59"
y1="994.07"
x2="744.59"
y2="994.07"
gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop>
<stop offset="1" stop-opacity="0.05"></stop>
</linearGradient>
<filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient
id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef"
data-name="Dégradé sans nom 8"
x1="734.18"
y1="984.18"
x2="735.18"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient
id="48a5c464-8edd-45c4-9ce5-a29ab784ca76"
data-name="Dégradé sans nom 9"
x1="735.17"
y1="984.18"
x2="734.17"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse">
<g transform="translate(0 -91)">
<g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16">
<rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect>
</g>
</g>
</mask>
</defs>
<g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard">
<g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook">
<g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg">
<g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)">
<path
id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"></path>
</g>
<path
id="400dfe13-b733-4999-ba8f-7c75bc5675e2"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"
fill="#fff"></path>
</g>
<path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path>
<g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom">
<g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1">
<polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon>
<polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon>
<g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)">
<polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon>
</g>
</g>
<polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon>
<polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon>
<g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom">
<path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path>
<path
id="6ac336ae-89f9-44e0-8892-088e108b9b0c"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="41d1f204-371f-4006-b6e3-3ca8e55170a4"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path>
<path
id="3661128a-dd7f-4831-ad61-767d60316664"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path>
</g>
<g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29">
<path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path>
<g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)">
<path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path>
</g>
</g>
<path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path>
<path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path>
</g>
<g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~">
<g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle">
<rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect>
</g>
<g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)">
<g>
<image width="1618" height="1010" transform="translate(264 79)" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg" style="isolation: isolate; height: auto;"></image>
</g>
</g>
</g>
</g>
</g>
</svg>在 Chrome 上:
在 firefox/safari 上:
最佳答案
height: auto 是 SVG 中的无效值
SVG 不是 html。 auto根据 the SVG specification 不是有效值.
When a length is used in an SVG presentation attribute, the syntax must match the following pattern:
length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
但是......你可以做你想做的事。
好消息是您仍然可以做自己想做的事。为此，我们可以使用 preserveAspectRatio -属性。这是 documentation on preserveAspectRatio .
文档描述了 preserveAspectRatio在图片上:
For ‘image’ elements, ‘preserveAspectRatio’ indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.
根据文档，语法如下所示:
preserveAspectRatio="[defer] align []
- 通常你可以忽略延迟。
- 对齐部分表示图像的放置位置。我们想把它放在
viewBox的顶部中间.因此这个值将变为xMidYMin指示图像将放置在中间顶部。 - 设置
meetOrSlice至slice会将图像的最小宽度和最小高度设置为viewBox的最小宽度和最小高度.设置meetOrSlice至meet将图像的最大宽度和最大高度设置为viewBox的最大宽度和最大高度.我们希望以全宽显示您图像的顶部。因此我们设置meetOrSlice至slice.
利用这些信息，我们可以设置 preserveAspectRatio -图像的属性。请注意 viewBox包含该属性是因为规范要求它。
<image
x="264"
y="79"
width="1618"
height="1010"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMin slice"
xlink:href="image.jpg">
</image>
这是您的新代码(我只更改了 <image> ):
<svg id="adf1338b-c638-44c9-9dd0-93df7f9f46b1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2148 1237.39">
<defs>
<filter id="e71a6e13-91a7-4c48-8db4-fd9f3d7680f9" x="-13.7" y="-110.5" width="128.3" height="140.2" name="filter-2">
<feOffset result="shadowOffsetOuter1" dx="7.8" dy="7.8" in="SourceAlpha"></feOffset>
<feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<linearGradient id="952164c2-8d50-4072-8fbc-1daf64a9f996" data-name="Dégradé sans nom" x1="752.65" y1="994.07" x2="753.65" y2="994.07" gradientTransform="matrix(2148, 0, 0, -12, -1616691.37, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.04"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.04"></stop>
</linearGradient>
<filter id="cb01145d-084b-4051-a7b8-afc1075b337d" y="-94.6" width="100" height="107.1" name="filter-5">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient id="45e2d6df-7e0f-4299-baf8-38080dc72e3c" data-name="Dégradé sans nom 2" x1="744.83" y1="994.07" x2="743.59" y2="994.07" gradientTransform="matrix(80, 0, 0, -12, -57419, 13126.84)" gradientUnits="userSpaceOnUse">
<stop offset="0"></stop>
<stop offset="1" stop-color="#fff"></stop>
</linearGradient>
<linearGradient
id="d6b5fdf2-09db-48a0-a136-a0968d72d8fd"
data-name="Dégradé sans nom 3"
x1="743.59"
y1="994.07"
x2="744.59"
y2="994.07"
gradientTransform="matrix(80, 0, 0, -12, -59486.95, 13126.84)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient id="ff74df12-f810-4f37-96f0-568d0d222681" data-name="Dégradé sans nom 4" x1="752.65" y1="968.72" x2="753.65" y2="968.72" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#eaeaea" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="1b131c43-0dea-4a3e-b634-4bb33e458dcc" data-name="Dégradé sans nom 6" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity="0.07"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0.07"></stop>
</linearGradient>
<linearGradient id="dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96" data-name="Dégradé sans nom 7" x1="753.15" y1="969.22" x2="753.15" y2="968.22" gradientTransform="matrix(2148, 0, 0, -33.39, -1616692.1, 33656.27)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0.05"></stop>
<stop offset="1" stop-opacity="0.05"></stop>
</linearGradient>
<filter id="55d6f982-cfb0-43d5-b1ce-33840dcf898f" x="-0.1" y="-93.6" width="100.2" height="105.3" name="filter-13">
<feOffset result="shadowOffsetInner1" dy="1" in="SourceAlpha"></feOffset>
<feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"></feComposite>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowInnerInner1"></feColorMatrix>
</filter>
<linearGradient
id="0347f2e9-aa93-4a31-83dd-17fa4a18e4ef"
data-name="Dégradé sans nom 8"
x1="734.18"
y1="984.18"
x2="735.18"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28499.14, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<linearGradient
id="48a5c464-8edd-45c4-9ce5-a29ab784ca76"
data-name="Dégradé sans nom 9"
x1="735.17"
y1="984.18"
x2="734.17"
y2="984.18"
gradientTransform="matrix(40, 0, 0, -16, -28127.82, 17037.76)"
xlink:href="#45e2d6df-7e0f-4299-baf8-38080dc72e3c"></linearGradient>
<mask id="e5f414aa-2dc3-4e7e-beb9-c2665256ed3c" x="264" y="79" width="1618" height="1010" maskUnits="userSpaceOnUse">
<g transform="translate(0 -91)">
<g id="5c9c027a-7ae5-4592-a798-6d4ba66f4659" data-name="mask-16">
<rect id="b88cc6a8-61b0-4014-b1dc-ffc15d65cac1" data-name="path-15" x="264" y="170" width="1618" height="1010" fill="#fff"></rect>
</g>
</g>
</mask>
</defs>
<g id="77173500-bfe4-412c-9f4c-6d18bf82908b" data-name="Artboard">
<g id="98dd64aa-035e-4372-81a9-808b5df3da43" data-name="macbook">
<g id="2528bcce-59cd-406f-8223-417b9dc2b419" data-name="bg">
<g filter="url(#e71a6e13-91a7-4c48-8db4-fd9f3d7680f9)">
<path
id="a7e121fd-8fcd-4e60-8f74-4eb6bbc3617a"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"></path>
</g>
<path
id="400dfe13-b733-4999-ba8f-7c75bc5675e2"
data-name="path-1"
d="M296.42,91H1850.58c34,0,43.53,0,58.17,4.92a62.76,62.76,0,0,1,37.33,37.33c4.92,14.64,4.92,24.17,4.92,58.17V1223.58c0,34,0,43.53-4.92,58.17a62.76,62.76,0,0,1-37.33,37.33c-14.64,4.92-24.17,4.92-58.17,4.92H296.42c-34,0-43.53,0-58.17-4.92a62.76,62.76,0,0,1-37.33-37.33c-4.92-14.64-4.92-24.17-4.92-58.17V191.42c0-34,0-43.53,4.92-58.17a62.76,62.76,0,0,1,37.33-37.33C252.89,91,262.43,91,296.42,91Z"
transform="translate(0 -91)"
fill="#fff"></path>
</g>
<path id="43c6a4ac-5af9-45b1-9c0a-e2b805fceea4" data-name="cam" d="M1070.5,133a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,1070.5,133Z" transform="translate(0 -91)" fill="#f2f2f2"></path>
<g id="41b53099-7741-4f93-a5b1-bbc7d688aeca" data-name="Bottom">
<g id="ed61ea5b-396c-4755-acc5-837900bb45dd" data-name="Rectangle-1">
<polygon id="3f88510c-3940-406a-944f-ea423fac19a9" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="#fff"></polygon>
<polygon id="12bddb6b-cf6b-4005-b437-57bd064462a3" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192" fill="url(#952164c2-8d50-4072-8fbc-1daf64a9f996)"></polygon>
<g filter="url(#cb01145d-084b-4051-a7b8-afc1075b337d)">
<polygon id="04c57957-d6c4-492a-af0d-9db3629d7056" data-name="path-4" points="0 1192 2148 1192 2148 1204 0 1204 0 1192"></polygon>
</g>
</g>
<polygon id="9b3aec7b-87aa-41a2-8c6e-1a1021f35e95" data-name="gradient" points="2068 1192 2148 1192 2148 1204 2068 1204 2068 1192" opacity="0.1" fill="url(#45e2d6df-7e0f-4299-baf8-38080dc72e3c)" style="isolation: isolate"></polygon>
<polygon id="2b964d54-6675-4afb-a411-aa203a5eaca1" data-name="gradient" points="0 1192 80 1192 80 1204 0 1204 0 1192" opacity="0.1" fill="url(#d6b5fdf2-09db-48a0-a136-a0968d72d8fd)" style="isolation: isolate"></polygon>
<g id="0f4064a7-9754-48ad-8901-2956fe4271fa" data-name="bottom">
<path id="6dfeff10-a16b-4114-9289-11ca4696184e" data-name="path-11" d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z" transform="translate(0 -91)" fill="#fff"></path>
<path
id="6ac336ae-89f9-44e0-8892-088e108b9b0c"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="929a00e3-5dc1-434b-9ea2-499bfffeb4b7"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#ff74df12-f810-4f37-96f0-568d0d222681)"></path>
<path
id="41d1f204-371f-4006-b6e3-3ca8e55170a4"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#1b131c43-0dea-4a3e-b634-4bb33e458dcc)"></path>
<path
id="3661128a-dd7f-4831-ad61-767d60316664"
data-name="path-11"
d="M0,1295H2148c-12.69,7.93-125.29,40.45-500,32-33.09,0-965.67-1-1170-1-237.14,0-335.31,1-424.91-16.31C21.72,1303.64,6,1298.65,0,1295Z"
transform="translate(0 -91)"
fill="url(#dc83dd5d-fe7a-4f3c-96dc-f9b3dd530f96)"></path>
</g>
<g id="be6e6ca0-ae80-4cfd-951c-f15752bfa1f4" data-name="Combined-shape-29">
<path id="0381728f-4162-474f-a8a6-a34825b87739" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)" fill="#fff"></path>
<g filter="url(#55d6f982-cfb0-43d5-b1ce-33840dcf898f)">
<path id="a04f8c46-600e-4f3d-a0d0-18aec2a64794" data-name="path-12" d="M908,1283h371v11c0,4.22-40,5-40,5H908s-40-.78-40-5v-11Z" transform="translate(0 -91)"></path>
</g>
</g>
<path id="45b417de-e8a7-48cf-9a51-a395e9f84f91" data-name="gradient" d="M868,1283h40v16s-40-.78-40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#0347f2e9-aa93-4a31-83dd-17fa4a18e4ef)" style="isolation: isolate"></path>
<path id="c82d931c-b5dd-41df-8d28-8b31c0ddfc08" data-name="gradient" d="M1279,1283h-40v16s40-.78,40-5Z" transform="translate(0 -91)" opacity="0.07" fill="url(#48a5c464-8edd-45c4-9ce5-a29ab784ca76)" style="isolation: isolate"></path>
</g>
<g id="868adc6d-b9e8-4932-87a6-1078d21ee680" data-name="~SCREEN-HERE~">
<g id="c080d29c-08b9-42d3-99f9-b333604f0ed7" data-name="Rectangle">
<rect id="61fb43be-48cd-4ec6-b11b-6f8c5a6f0202" data-name="path-15" x="264" y="79" width="1618" height="1010" fill="#d8d8d8"></rect>
</g>
<g mask="url(#e5f414aa-2dc3-4e7e-beb9-c2665256ed3c)">
<g>
<image x="264" y="79" width="1618" height="1010" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin slice" xlink:href="http://res.cloudinary.com/bastienrobert/image/upload/v1519135713/cover_copie_vcpfee.jpg"></image>
</g>
</g>
</g>
</g>
</g>
</svg>关于html - SVG 图像高度自动在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49060832/