如何將SVG馴服為背景圖像

Question

我的目標如下：我想在容器中放置一顆心-縮放並定位。

首先，我想使用圖標字體，但是我放棄了這個想法。 將心臟加載為我也丟棄的圖像的第二種選擇-我必須在最近的項目中使用心臟幾次，並且我想保存http請求。 因此，我想將SVG作為背景圖像選項使用。 但是問題是，我某種程度上無法馴服那只野獸。 我建立了一支示例筆來說明我不了解的問題和部件。

未經base64編碼的優化SVG如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><polygon points="756,168.4 593.5,168.4 480,258.3 366.5,168.4 204,168.4 30,349 480,791.6 930,349"/></svg>

您可以從我的Codepen中找到示例代碼。

基本上，我有三個相關的問題（通常我更喜歡單獨發布問題，但是這三個問題之間的聯系太緊密了，因此我希望可以）：

1. 大小：.heart1的寬度和高度為100％，一切顯示正常。 如果使用合適的px值也可以，但是如果嘗試輸入ems，則不再顯示心臟。 為什么？

2. 綠框：.heart1的寬度為100％，但是如果將瀏覽器窗口拖動更大，則心只會增長到某個點，然后只有綠框才會繼續增長。 我以為SVG或多或少能夠擴展到“無限”？

3. 黃框：我的基本目標是使心臟比黃框的寬度小一點，使其在水平方向上居中，並為心臟留出一定的頂部邊緣。 .heart2的寬度和高度設置為75％。 但是無論如何，我無法將心臟定位在具有top屬性，left屬性和/或right屬性以及在background：url中的“ no-repeat center 2em”（無重復中心2em）中。 它只是沒有反應。

Answer 1

我使用下面顯示的代碼塊將svg放入DIV中。 在寬度/高度相同的DIV中效果最佳。 如下所示，它使用getBBox（）更改其viewBox ，並更改svg的width / height值。 它可以跨瀏覽器運行：IE10 + / CH31 / FF23

var bb=mySVG.getBBox()
var bbw=bb.width
var bbh=bb.height

//--use greater of bbw vs bbh--
if(bbw>=bbh)
    var factor=bbw/divWH
else
    var factor=bbh/divWH

var vbWH=divWH*factor

var vbX=(bbw-vbWH)/2
var vbY=(bbh-vbWH)/2
//---IE/CH---
if(!isFF)
{
    var ViewBox=mySVG.viewBox.baseVal
    ViewBox.x=vbX
    ViewBox.y=vbY
    ViewBox.width=vbWH
    ViewBox.height=vbWH
}
else
    mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbW+" "+vbH)

//--requred for FF/CH---
if(!isIE)
{
    mySVG.setAttribute("width","100%")
    mySVG.setAttribute("height","100%")
}
else
{
    mySVG.removeAttribute("width")
    mySVG.removeAttribute("height")
}

svg在DIV中位於左/右和上/下居中，並保持其縱橫比。 這應該可以幫助您入門。