在 svg 容器中填充完整的图像

Question

我是 stackoverflow 的新手。

我在 svg 代码中遇到问题。我想绘制一个带有背景图像的容器，但是当我设置一个图像时，它会分成 4 个部分并在容器中间给出一个空白区域。

这是我的 SVG 代码：

<svg id="do-as-cards" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0,0,320,340" preserveAspectRatio="xMidYMin">
   <defs>
    <pattern id="imgDo" preserveAspectRatio="true" patternUnits="userSpaceOnUse" y="0" x="0" width="240" height="120" >
        <image xlink:href="http://s22.postimg.org/ekd89tb8x/image.png" x="0" y="0" width="407px" height="220px" />
    </pattern>
     <pattern id="imgAs" preserveAspectRatio="true" patternUnits="userSpaceOnUse" y="0" x="0" width="240" height="120" >
        <image xlink:href="http://s22.postimg.org/72zfguwc1/image.png" x="0" y="0" width="407px" height="220px" />
    </pattern>
</defs>
 <g transform="translate(160,86)">

  <g id="doCard" class="animatedCard" transform="matrix(1 0 0 1 0 0)" onclick="spin()">     
    <path class="cardOutline" d="m -150,-60 c 0,-10 10,-20 20,-20 l260,0 c 10,0 20,10 20,20 l 0,120 c 0,10 -10,20 -20,20 l -260,0 c -10,0 -20,-10 -20,-20 l 0,-120 z"   />
      <foreignObject id="do" class="cardFace" x="-120" y="-60" width="240" height="120"></foreignObject>
      </g>
 </g>



 <g transform="translate(160,253)">
  <g id="asCard" class="animatedCard" transform="matrix(1 0 0 1 0 0)" onclick="spin()">
   <path class="cardOutline" id="as_path" d="m -150,-60 c 0,-10 10,-20 20,-20 l260,0 c 10,0 20,10 20,20 l 0,120 c 0,10 -10,20 -20,20 l -260,0 c -10,0 -20,-10 -20,-20 l 0,-120 z"/>
   <foreignObject id="as" class="cardFace" x="-120" y="-60" width="240" height="120"></foreignObject>
        </g>
 </g>

</svg>

你可以通过url看到这段代码在运行阶段

我已经尝试了以下方法：

1. How to set a SVG rect element's background image?
2. Fill SVG path element with a background-image

Answer 1

使用<pattern> 可能不是做你想做的事的最佳方式。不过还是可以的。

如果您使用的是模式，请坚持使用默认的 patternUnits (objectBoundingBox)，并将 width 和 height 设置为 1。然后将图像的宽度和高度设置为您尝试填充的区域的最大宽度或高度。对于您的示例形状，这似乎是 300。然后调整 <image> 的 x 和 y，使其在您的形状中居中。

<pattern id="imgDo" y="0" x="0" width="1" height="1" >
    <image xlink:href="http://s22.postimg.org/ekd89tb8x/image.png" x="0" y="-75" width="300" height="300" />
</pattern>

演示：http://jsfiddle.net/TRLa7/1/

就个人而言，我会在这种情况下使用<clipPath>。使用您的路径形状作为图像的 clipPath。您将需要添加一个额外的<path> 副本以应用您的笔画效果等。您可以在<defs> 部分定义您的卡片，然后使用<use> 来实例化每张卡片。

演示：http://jsfiddle.net/TRLa7/2/