SVG背景图像 - 居中和缩放

Question

基本上我需要模仿CSS background-image，background-repeat:no-repeat，background-position: 50% 50%和background-size: 90%（略有不同）到SVG形状。它应该看起来像这样（百分比，盾牌和锚点作为背景图像）：

要求是：

• 图片必须与fill颜色一起使用，并且独立（background-image）
• 它必须只有一张图片，而不是大量的副本（background-repeat:no-repeat）
• 必须在形状（background-position: 50% 50%）
中居中
• 图像必须符合形状且不超过其边框
• 理想情况下，应该对图像应用填充（background-size: 90%）

我对SVG的使用还不熟悉。尝试使用patterns并使用模式单位和宽高比：

<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％（模式width和height），以viewBox调整为中心（仅适用于此特定的一个）。但重复并在Firefox中 - 拉伸（截至第29版），好像它是preserveAspectRatio = none。在Chrome中没有弹力。而且我想不出一种方法来使用填充颜色的图像。

The live example

非常感谢任何帮助。

Answer 1

已更新已更正答案，因为我误解了这个问题。

要使图案按照您的要求执行（使用10％填充），您应该调整图案的viewBox值。

因此，例如，锚形状的非填充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>

Demo fiddle here