除Chrome中外，SVG图像高度自动无效

Question

我在SVG中使用image标记，在我的个人网站的模型中包含网站屏幕截图。 当我使用Chrome访问我的网站时，我没有问题，但使用Firefox或Safari，我遇到了一些问题。

它的工作方式如下：我定义了一个SVG mask ， image使用该蒙版在“屏幕”中，图像高度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> 

在铬上：

在firefox / safari上：

Answer 1

height：auto是SVG中的无效值

SVG不是HTML。 根据SVG规范， auto不是有效值。

在SVG表示属性中使用长度时 ，语法必须与以下模式匹配：

length :: = number（“em”|“ex”|“px”|“in”|“cm”|“mm”|“pt”|“pc”|“％”）？

但是......你可以做你想做的事。

好消息是你仍然可以做你想做的事。 为此，我们可以使用preserveAspectRatio -attribute。 这是有关preserveAspectRatio的文档 。

该文档描述了图像上的preserveAspectRatio ：

对于“图像”元素，“preserveAspectRatio”表示参考图像应如何相对于参考矩形拟合，以及是否应相对于当前用户坐标系保留参考图像的纵横比。

根据文档，语法如下所示：

preserveAspectRatio =“[defer] align []

• 通常你可以忽略推迟。
• 对齐部分指示图像的放置位置。 我们想将它放在viewBox的顶部中间。 因此，此值将变为xMidYMin表示图像将放置在中间顶部。
• 设置meetOrSlice到slice将设置的最小宽度和所述图像的最小高度，以使的viewBox 。 设置meetOrSlice以meet将设置最大宽度和图像最大高度的的viewBox 。 我们希望以全宽度查看图像的顶部。 因此我们将meetOrSlice设置为slice 。

有了这些信息，我们可以设置图像的preserveAspectRatio -attribute。 请注意，包含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> 

Answer 2

不幸的是，正如您所发现的那样，Google Chrome以外的任何浏览器都不支持此功能。 您将不得不使用必须找出图像的实际大小并将其放入。另一种选择是使用JavaScript。 抱歉。

所以对你来说，你自己的代码片段会起作用。

 <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>