如何在Firefox中缩放SVG背景图像而不考虑纵横比？

Question

我在一个宽高可变的元素上设置了CSS background-image，使用的是SVG格式图片。期望行为是将图片按需在各个方向上拉伸以覆盖整个元素区域。在Chrome、Safari，甚至是老旧的Internet Explorer 9中，缩放效果都符合预期：

但在Firefox中（包括桌面版和移动版），输出结果更像这样：

经过一些研究，发现Firefox在SVG渲染方面比其他浏览器要更严格，因为它严格遵循最新版本的规范。（Opera Mini也存在类似问题，无法缩小此背景图像(当启用时)，鉴于Presto引擎对规范的认真态度，它可能期望与Firefox执行相同的更新方法。）

你可以在http://ti.gt/上查看我的实时页面。我还提供了下面的代码：

HTML

<h1 class="blog-title-wrapper">
  <a href="/" class="blog-title pop-out">{Title}</a>
</h1>

CSS

.blog-title {
    background: none;
    color: #fff;
    font: normal normal 4em "Alternate Gothic", sans-serif;
    margin: 0 0 0 .1em;
}

.blog-title-wrapper {
    margin: -1px 0 0 0;
    padding-bottom: 20%;
    background: #d23e2c;
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMzMzIDc1MCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJtIDAsMCAxMzMzLDAgMCwzMjAuNTMgLTcyLjY3LDQ4LjQyIDUyLjQ1LDM3LjU3IC0xMjYuMzEsNTIuODQgNTAuMTMsMTM2LjE5IC0xOS45OCwzNy4yNiAtMzkuNDcsLTExLjcxIC0zOC43NSw0MC40NyAtNjMuMzIsLTEyLjA3IC0zMC40NCwtMTM1LjYgLTcuOTQsMy4yOCAyNC43NCwxNDAuOTUgLTM4LjEzLDMwLjI2IC00NC4zNSwtMy4zMyAtMzUuODMsMjMuMzkgLTQ4LjkzLC0xMy4yMiAtMzguMjQsLTE0MS40OCAtMTAuNTcsMy42OCA2LjIsMTQ4Ljk3IC0zMy44OCwyMC40NiAtMjUuMjYsLTEzLjg1IC0yMi40OCwzMS40OSAtMjcuMzYsLTIyLjMyIC0zMiwyNC4zNCBMIDY4MC41NSw3MTguNiA2NjQuNyw1NjQgbCAtMTcuMDgsMC45MSAtMjEuODgsMTU5LjczIC0yOS4xNywyNS4zNiAtMS43MiwwIC0yNy44NCwtMjMuMDIgLTIzLjMsMTMuODggLTIxLjYsLTIwLjcxIC0yMi4zMSwxMS4yMSAtMjQuMTMsLTIzLjE4IDEwLjE0LC0xNTUuNCAtNC43NywtMi4yIC0zMy42NCwxNTcuNjMgLTI5Ljk3LDE0LjIxIC04LjgsLTEuMTcgLTM1LjIxLC0yMC4zOCAtMzQuMTcsMTAuNDEgLTguNjMsLTIuNzkgLTMyLjkzLC0yNi42OCAyNC45NiwtMTUxLjU0IC0xMC42NiwtMi4wOSAtNDUuNjIsMTQwLjM0IC0zMi40OSwxNS4zMyAtNTUuMDgsLTQwLjM2IC0zOC45OSw5LjA3IEwgMTA2LjgyLDYxOC40MyAxNTMuMjYsNDg2LjA2IDguODUsNDI4LjU3IDYzLjkzLDM4MC44NiAwLDMzMy4wNSB6IiBmaWxsPSIjZDIzZTJjIi8+PHBhdGggZD0iTSAzMDIuNzYsMzQuNTggNDY0Ljk4LDE1OC45MyA0MjMuMDcsMzY3LjM3IDI3Ny4yNywyODQuMjIgMTgxLjc5LDMzMi42NiA4MS41NywxNDMuMDggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gMTA3OC45Miw0MC4xMSAxOTYuOSw3Ny44NCAtMTA5Ljk5LDI1My4wNyAtMTAzLjg5LC02MC4wNyAtMTUuMzcsMS45IC0xMTkuMDUsNDkuMjIgLTI1LjQ3LC0yMjcuMzQgeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNjA1LjY1LDMyMi43NCAzLjYsMTA3LjE5IC0xMDAuNzYsMS41NyA2NC41OSwtMzMuMzggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNzE4LjUxLDMyNS4zIDMzLjMzLDc3LjAyIDc5LjQxLDI4LjI3IC0xMTkuOSwxOS40OSB6IiBmaWxsPSIjYTgzMTIzIi8+PC9zdmc+") no-repeat 100% 100%, none;
}

数据URI似乎不是关键问题，但这是解码后的SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1333 750" version="1.1">
    <path d="m 0,0 1333,0 0,320.53 -72.67,48.42 52.45,37.57 -126.31,52.84 50.13,136.19 -19.98,37.26 -39.47,-11.71 -38.75,40.47 -63.32,-12.07 -30.44,-135.6 -7.94,3.28 24.74,140.95 -38.13,30.26 -44.35,-3.33 -35.83,23.39 -48.93,-13.22 -38.24,-141.48 -10.57,3.68 6.2,148.97 -33.88,20.46 -25.26,-13.85 -22.48,31.49 -27.36,-22.32 -32,24.34 L 680.55,718.6 664.7,564 l -17.08,0.91 -21.88,159.73 -29.17,25.36 -1.72,0 -27.84,-23.02 -23.3,13.88 -21.6,-20.71 -22.31,11.21 -24.13,-23.18 10.14,-155.4 -4.77,-2.2 -33.64,157.63 -29.97,14.21 -8.8,-1.17 -35.21,-20.38 -34.17,10.41 -8.63,-2.79 -32.93,-26.68 24.96,-151.54 -10.66,-2.09 -45.62,140.34 -32.49,15.33 -55.08,-40.36 -38.99,9.07 L 106.82,618.43 153.26,486.06 8.85,428.57 63.93,380.86 0,333.05 z" fill="#d23e2c"/>
    <path d="M 302.76,34.58 464.98,158.93 423.07,367.37 277.27,284.22 181.79,332.66 81.57,143.08 z" fill="#a83123"/><path d="m 1078.92,40.11 196.9,77.84 -109.99,253.07 -103.89,-60.07 -15.37,1.9 -119.05,49.22 -25.47,-227.34 z" fill="#a83123"/>
    <path d="m 605.65,322.74 3.6,107.19 -100.76,1.57 64.59,-33.38 z" fill="#a83123"/>
    <path d="m 718.51,325.3 33.33,77.02 79.41,28.27 -119.9,19.49 z" fill="#a83123"/>
</svg>

我尝试过各种策略来使Firefox接受我的要求，但到目前为止一个方法都没有成功。我查看了这篇专门讲解此主题的文档，但是无法从中获得任何建议。

- Tigt

Answer 1

我需要设置background-size。这段代码就可以解决问题：

background-size: 100% 100%;

“更严格的渲染模式”的一部分是将大小信息推迟到页面内，而不是在SVG内本质上进行。

我原以为我在background简写语法中定义了这个，但显然我实际上指定了background-position。我对此感到相当愚蠢，但事实证明这是CSS中最复杂和最臃肿的简写语法之一。

- Tigt

Answer 2

这个问题已经解决了八年，但是如果有人遇到同样的问题而来到这里，现在有一个更多的原因可能导致Firefox不尊重大小，即使设置了background-position：

如果图像的宽高比与svg文件中定义的不同，则会出现此问题。

preserveAspectRatio="none"

必须在根<svg ...>节点中定义。

请参见此处并查找preserveAspectRatio。

- Johanna

Answer 3

注意...您最好不要使用base64编码版本的背景...如下：

.blog-title {
    background: none;
    color: #fff;
    font: normal normal 4em "Alternate Gothic", sans-serif;
    margin: 0 0 0 .1em;
}

.blog-title-wrapper {
    margin: -1px 0 0 0;
    padding-bottom: 20%;
    background: #333;
    background-size: 100% auto;
    background-image: url("data:image/svg+xml;charset=UTF-8, %3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1333 750'%3E%3Cpath fill='%23d23e2c' d='M0 0h1333v320.5l-72.7 48.4 52.5 37-126.3 53 50 136-20 37-39.3-12-38.8 40.4-63.3-12-30-135.7-8 3 25 141-38 30.3-44-3-36 23.4-48.7-13-39-141-10.5 3.6 6.2 149-34 20.5-25-14-22.7 31-27.3-22-32 24-30-28L665 563l-17 1-22 159.4-29 25.4h-2l-28-23-23.3 14-21.7-21-22 11.6-24-23.4 10-155-4.8-2.2-33.6 158-30 14.2-8.8-1-35.2-20.5-34 10.2-8.8-3-33-27 25-151.7-10.6-2-45.6 140-32.6 16-55.2-40.5-39 9-33-34 46.5-132L8.8 429l55-47.8L0 333z'/%3E%3Cpath fill='%23a83123' d='M302.8 34.6L465 159l-42 208.4-145.7-83.2-95.5 48.5L81.6 143zM1079 40l196.8 78-110 253-104-60-15.2 1.8-119 49.3L902 135zM605.6 322.7l3.6 107.2-100.7 1 64.5-33zm113 2.6l33.2 77 79.5 28.3-120 19.5z'/%3E%3C/svg%3E");
}

<h1 class="blog-title-wrapper">
  <a href="/" class="blog-title pop-out">{Title}</a>
</h1>

- Ruskin

---

哦，我想我可能同意。;) 如果这让你不舒服，我可以更新我的示例。 - Tigt

放心，我在发布这个帖子时没有看原始问题的日期（该问题已被推荐到主页）。我认为在2014年使用base64可能是更好的方法。你可能会喜欢我制作的这个URI编码工具...欢迎提出任何改进意见。 - Ruskin