文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG图像高度自动除Chrome外不工作

问SVG图像高度自动除Chrome外不工作
EN

Stack Overflow用户

提问于 2018-03-02 00:16:35

回答 2查看 206关注 0票数 3

我使用image标签在SVG中包括网站屏幕截图为我的个人网站的模型。当我使用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上：

html

css

svg

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-03-21 00:43:54

高度: auto是SVG中的无效值。

SVG不是html。根据auto，SVG规范不是一个有效值。

在SVG表示属性中使用长度时，语法必须与以下模式匹配：长度::=号码("em“\x "ex”\ "px“=”%“？)？

But...You可以做你想做的事。

好消息是你仍然可以做你想做的事。为了实现这一点，我们可以使用preserveAspectRatio-attribute。这是关于preserveAspectRatio的文档。

文档描述了图像上的preserveAspectRatio：

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

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

preserveAspectRatio="defer []

通常你可以忽略延迟。
对齐部分指示图像放置的位置。我们想把它放在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>

票数 3

Stack Overflow用户

发布于 2018-03-20 17:11:55

不幸的是，正如您所发现的，除了Google之外，任何浏览器都不支持这一点。你将不得不使用找出图像的实际大小，并把它放进去。另一种选择是使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49060832

复制

相似问题

问SVG图像高度自动除Chrome外不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG图像高度自动除Chrome外不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG图像高度自动除Chrome外不工作
EN