Question

我正在开发我的投资组合，我想在模型中插入一些网站屏幕截图。我不想小心，每次我想添加一个项目，在Photoshop上的模型中集成项目的屏幕截图，生成我将包含在我的网站中的JPG图像。所以我想到了一个相对简单的解决方案，即在SVG中采用模型，并将图像直接集成到其中。

问题是，图像高于模型，我希望SVG的高度与图像的大小相比是自动的。

显示SVG下的图像是因为SVG上有overflow: visible;。但是SVG中的图像超出了SVG之后的内容：

总之，SVG高度必须取决于图像的高度。

这是SVG代码：

/* 
* For you, so you can see the image
* Without it, the body if equal to the SVG height so you can't see the image
*/
body {
  min-height: 1300px;
}

/* SVG CODE */
svg {
  overflow: visible; /* So you can see the image, but the SVG height stay the same */
  width: 100%;
  height: auto;
}
svg image {
  height: 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"/>
          <feGaussianBlur result="shadowBlurOuter1" stdDeviation="81.5" in="shadowOffsetOuter1"/>
          <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"/>
        </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 offset="1" stop-color="#fff" stop-opacity="0.04"/>
        </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"/>
          <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"/>
          <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"/>
        </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 offset="1" stop-color="#fff"/>
        </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 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 offset="1" stop-color="#eaeaea" stop-opacity="0.07"/>
          <stop offset="1" stop-color="#fff" stop-opacity="0.07"/>
        </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 offset="1" stop-color="#fff" stop-opacity="0.07"/>
        </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 offset="1" stop-opacity="0.05"/>
        </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"/>
          <feComposite result="shadowInnerInner1" operator="arithmetic" k2="-1" k3="1" in="shadowOffsetInner1" in2="SourceAlpha"/>
          <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"/>
        </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 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"/>
      </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)"/>
            </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"/>
          </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"/>
          <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 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)"/>
              <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"/>
              </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 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"/>
            <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 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 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 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 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)"/>
            </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"/>
              <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)"/>
              </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 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"/>
          </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"/>
            </g>
            <g>
              <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;"/>
                <rect id="aef89c73-ce68-4e7f-aa2a-40ef1cca19a7" data-name="rect-17" x="264" y="79" width="1618" height="1010" fill-opacity="0"/>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>

对于6米长的问题感到抱歉。

Answer 1

所以我终于找到了一个简单的解决方案，不像我想要的那样好但更容易使用：我设置了一个高于图像的SVG掩码。所以它现在看起来像这样，这是SVG代码：

<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 3031">
  <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-large" x="264" y="79" width="1618" height="3050" 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="3050" 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-large)">
          <g>
            <image width="1618" height="1010" transform="translate(264 79)" xlink:href="/images/capsule/cover.jpg" style="isolation: isolate; height: auto;"></image>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

svg中的图像高度高于SVG

1 个答案: