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 中重复并被拉伸（从 v29 开始），就好像它是 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