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

我是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>

通过使用以下命令，您可以在运行阶段看到此代码

我已经尝试了以下方法：

使用

可能不是做你想做的事情的最佳方式。但这是可以做到的

如果正在使用图案，请坚持使用默认的

patternUnits

（

objectBoundingBox

），并将

宽度和
高度设置为
1
。然后将图像的宽度和高度设置为要填充区域的最大宽度或高度。在您的示例形状中，似乎是300。然后调整
的
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>



演示：

就我个人而言，对于这种情况，我会使用
。使用路径形状作为图像的剪辑路径。您需要添加一个额外的
副本以应用笔划效果等。您可以在
部分定义卡，然后使用
实例化每张卡

演示：
thnk you very@BigBadboom for give me reply，但您使用的是
foreignObject
，我想使用
text
，因为我想在点击卡片时替换图像，然后填充IE中使用
foreignObject
时未显示的文本使用javascript/Jquery在运行时从背景中删除。我只需要带蓝色边框的白色背景，因为我将文本填充在矩形中。您可以删除
。它们与解决方案无关。我只是把它们放在那里，因为它们在你的原始文件中。你可以使用CSS更改背景。只需更改
fill:url（#imgDo）至<代码>填充：白色。要使用jQuery做同样的事情，可以使用类似
$（“#doCard path”）.css（“fill”，“white”）