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

在运行阶段查看此代码

我已经尝试了以下内容：

Answer 1

使用<pattern>可能不是您想要的最佳方式。它可以做到。

如果您使用的是模式，请坚持使用默认patternUnits（objectBoundingBox），并将width和height设置为1。然后将图像的宽度和高度设置为您要填充的区域的最大宽度或高度。如果是示例形状，则显示为300.然后调整x的{{1}}和y，使其在您的形状中居中。

<image>

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

就个人而言，我会在这种情况下使用<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>。使用路径形状作为图像的clipPath。您需要添加<clipPath>的其他副本以应用笔划效果等。您可以在<path>部分中定义卡片，然后使用<defs>来实例化每个卡片。卡。

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

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

1 个答案: