web-dev-qa-db-ja.com

Firefoxでアスペクト比を尊重せずにSVG背景画像を拡大縮小するにはどうすればよいですか？

私はCSSを持っていますbackground-image流体の高さと幅の要素に設定します。これはSVGであり、意図された動作は、要素の領域全体をカバーするために必要な方向に伸びることです。 Chrome、Safari、さらには古き良きInternet Explorer 9でも、スケーリングは私が望むように機能します。

the correctly stretched background image

しかし、Firefox（デスクトップとモバイルの両方）内では、出力は次のようになります。

the incorrectly stretched background image preserves its aspect ratio and doesn't fill the space

少し掘り下げてみると、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に私の要求を受け入れさせるためにさまざまな戦術を試しましたが、これまでのところ成功していません。私は調べました まさにこのトピックに関するこのドキュメント 、しかし私はそれからアドバイスを引き出すことができません。

cssfirefoxsvggecko
13
Tigt

background-sizeを設定する必要がありました。このスニペットはトリックを行いました：

background-size: 100% 100%;

「より厳密なレンダリングモデル」の一部は、本質的にSVG内ではなく、サイズ情報をページに延期することでした。

私はwasこれをbackgroundの省略形の中で定義していると思いましたが、どうやら代わりにbackground-positionを指定していました。私はそれについてかなりばかげていると感じますが、それはCSSで最も厄介で最も大きくなりすぎた速記のようです。

20
Tigt

注... 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>
0
Ruskin