如何将 SVG 驯服为背景图像

Question

我有以下目标：我想在容器中放置一颗心 - 缩放和定位。

首先我想使用图标字体，但我放弃了这个想法。第二个选项将心脏加载为我也丢弃的图像 - 我必须在最近的项目中使用心脏几次，我想保存 http 请求。因此，我想使用 SVG 作为背景图像选项。但问题是，不知怎的，我无法驯服那头野兽。我已经制作了一个示例笔来说明我不理解的问题和部分。

un-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.的示例代码

基本上我有三个相关的问题（通常我更喜欢发布单独的问题，但这三个问题基本上联系得太紧密了，所以我希望没关系）：

1. 尺寸：.heart1 的宽度和高度为 100%，一切正常。如果您使用合适的 px 值，一切都很好，但是如果您尝试输入 em，则不再显示心脏。为什么？

2. 绿色框：.heart1 的宽度为 100%，但如果您将浏览器窗口拖得更大，心脏只会增长到某个点，然后只有绿色框会继续增长。我认为 SVG 或多或少能够扩展到“无限”？

3. 黄色框：我的基本目标是使心脏比黄色框的宽度小一点，将其水平居中，并给心脏一些上边距。 .heart2 的宽度和高度设置为 75%。但不知何故，我无法将心脏定位在盒子内，既不具有顶部、左侧和/或右侧属性，也不具有“无重复中心 2em”的背景：url，例如.它只是没有反应。

Answer 1

我使用如下所示的代码块将 svg 放入 DIV。它在具有相同宽度/高度的 DIV 中效果最佳。正如您在下面看到的，它使用 getBBox() 来更改其 viewBox，并更改 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 内的左/右和上/下居中，并保持其纵横比。这应该可以帮助您入门。