如何馴服SVG作爲背景圖像

我有以下目標：我想在容器中放置一顆心 - 縮放和定位。如何馴服SVG作爲背景圖像

首先，我想使用圖標字體，但我放棄了這個想法。第二種選擇是將心臟加載成我已經放棄的圖像 - 我必須在最近的項目中多次使用心臟，並且我想保存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>

的示例代碼，你可以找到from my codepen.

基本上我有三個相關的問題（通常我喜歡張貼不同的問題，但這些三個問題基本上是太連接，所以我希望它沒關係）：

尺寸：.heart1有一個寬度和高度o f 100％，一切都顯示正常。如果你使用適合px的值也都很好，但是如果你嘗試輸入ems，心臟就不會再顯示了。爲什麼？
綠色框：.heart1的寬度爲100％，但如果您拖動瀏覽器窗口變大，則心臟只會增長到某個點，然後只有綠色框持續增長。我認爲SVG或多或少能夠擴展到「無限」？
黃色方框：我的基本目標是讓心臟比黃色方塊的寬度稍小一些，並將其水平居中並給心髒一些頂部邊緣。 .heart2的寬度和高度設置爲75％。但無論如何，我無法將心放在沒有頂部，左側和/或右側屬性的框內，也不能在背景中顯示：帶有「no-repeat center 2em」的網址，例如。它只是沒有反應。

來源

2014-01-10 rpk

這看起來像3個不同的問題。 – cimmanon

請檢查http://stackoverflow.com/questions/8919076/how-to-make-a-svg-element-expand-or-contract-to-its-parent-container，http://stackoverflow.com/questions/8515524 /如何-DO-規模-AN-SVG-多邊形的-EMS –

我使用下面顯示的代碼塊來適應svg在DIV中。它在寬度/高度相同的DIV中效果最佳。如下圖所示，它使用getBBox（）更改其視圖框，以及更改svg寬度/高度值。它的工作原理跨瀏覽器：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內居中兩個左/右和上/下，再加上保持其高寬比。這應該有助於你開始。

來源

2014-01-10 19:55:32

如何馴服SVG作爲背景圖像

回答

相關問題