html - SVG 图像高度自动在 Chrome 中不起作用

Question

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

Answer 1

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>