html - 除了 Chrome 之外，SVG 图像高度自动不起作用

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

Chrome :


在 Firefox/Safari 上:

最佳答案

高度:auto 是 SVG 中的无效值

SVG 不是 html。根据 the SVG specification ， auto 不是有效值。



但是...你可以为所欲为。

好消息是你仍然可以做你想做的事。为此，我们可以使用 preserveAspectRatio 属性。这是 documentation on preserveAspectRatio 。

该文档描述了图像上的 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 - 除了 Chrome 之外，SVG 图像高度自动不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49060832/