SVG背景图像居中并缩放

基本上，我需要模仿CSS

背景图像

，

背景重复：不重复

，

背景位置：50%50%

和

背景大小：90%

（略有不同）到SVG形状。它应该如下所示（百分比、屏蔽和锚定作为背景图像）：

这些要求是：

• 图像必须与

  填充

  颜色一起使用，并在其上独立（

  背景图像

  ）
• 它必须只有一个图像，而不是很多副本（

  背景重复：无重复

  ）
• 它必须在形状内居中（

  背景位置：50%50%

  ）
• 图像必须符合形状，且不得超出其边界
• 理想情况下，应该对图像应用某种填充（

  背景大小：90%

  ）

我还没有那么熟练地使用SVG。尝试使用

图案

并使用图案单位和纵横比：

<pattern id="p2" height=".9" width=".9" 
    patternUnits="objectBoundingBox"
    patternContentUnits="userSpaceOnUse"
    viewBox="0 0 140 165" preserveAspectRatio="xMidYMid meet"
>
    <g width="1" height="1" transform="matrix(1.25,0,0,-1.25,0,164.4025)" preserveAspectRatio="xMidYMid meet">
    ...
    </g>
</pattern>

...

这样，图像将缩放到形状大小的90%（图案<代码>宽度<代码>和<代码>高度<代码>），通过<代码>viewBox调整居中（仅适用于此特定图案）。但是在Firefox中重复和拉伸（从v29开始），就好像它是

preserveSpectratio=none

。铬合金没有弹性。我想不出一种方法来使用填充颜色的图像

---

非常感谢您的帮助。

更新了答案，因为我误解了问题

要使图案符合您的要求（有10%的填充），您应该调整图案的

viewBox

值

因此，例如，锚定形状的非填充视口为：

viewBox="0 0 137 166"

您希望有10%的填充，因此让我们在边缘周围添加17。我选择17是因为它大约是高度的10%：

viewBox="-17 -17 171 200"

在这里，我们从minX和minY中减去17，在宽度和高度中加上34。因此，您的新模式定义如下所示：

<pattern id="p2" height="1" width="1"
         patternUnits="objectBoundingBox"
         patternContentUnits="userSpaceOnUse"
         viewBox="-17 -17 171 200" preserveAspectRatio="xMidYMid meet">
    <g> ... </g>
</pattern>

... 

---

谢谢您的回复。我知道模式是用于模式的（正如名字所说的）。但为许多形状中的每一个绘制三个（总共）伪bg元素似乎太过分了。js只处理三个预定义的BG也是如此。模式似乎在某种程度上有帮助，所以我自然想知道是否有一种方法可以让它们完成所有的工作。元素将以任何一种方式绘制，无论它们是否是模式。每个形状不必有单独的“锚”。它可以定义一次并重新使用。BigBadaboom，您的意思是在

中定义形状，还是将形状定义为

而不是

它？如果是这样，（如果我做对了），它将需要手动计算

元素的位置，或者使用预定义的位置创建大量元素，这是多余的部分<另一方面，code>pattern可以作为一个属性

fill=“#patten1”

，这正是吸引我使用它们的原因。现在我明白了，我对你的问题有点误解了。我已经重写了我的答案，以实现我现在相信你所追求的目标。对不起，我花了那么长时间才回复。它确实有效-正如计划的那样，感谢您的时间和建议！然而，这些模式似乎延伸到表单的边缘——仅在Firefox中（至少从v29开始）。这真的是一个bug，还是其他浏览器（在Chrome、IE 10、Presto和Blink Opera中测试过）都以错误的方式进行了测试？