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.

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

大小调整：.heart1的宽度和高度均为100％，一切正常。如果你使用适合的px值一切都很好但是如果你试图进入ems，心脏就不再显示了。为什么呢？
绿色框：.heart1的宽度为100％，但如果您将浏览器窗口拖得更大，则心脏只会增长到某个点，然后只有绿色框会继续增长。我认为SVG或多或少能够扩展到“无限”？
黄色方框：我的基本目标是使心脏比黄色方框的宽度小一点，将其水平放置在内部并给予心脏一些上边距。 .heart2的宽度和高度设置为75％。但不知何故，我无法将心脏定位在盒子内，既没有顶部，左侧和/或右侧属性，也没有位于背景中：url带有“no-repeat center 2em”，例如。它只是没有反应。

Answer 1

我使用下面显示的代码块来适应DIV中的svg。它在具有相同宽度/高度的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中的左/右和上/下居中，并保持其纵横比。这应该有助于您入门。

如何将SVG驯服为背景图像

1 个答案: