我是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>
您可以使用此网址在运行阶段查看此代码
我已经尝试了以下方法：
使用a<pattern>可能不是执行所需操作的最佳方法。可以做到的。
如果您使用的是图案，请遵循默认设置patternUnits（objectBoundingBox），然后将width和设置height为1。然后将图像的宽度和高度设置为要填充的区域的最大宽度或高度。对于示例形状，看起来是300。然后调整x和y，<image>使其在形状的中心。
<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>在这种情况下使用a 。使用路径形状作为图像的clipPath。您将需要添加的其他副本<path>以应用笔触效果等。您可以在<defs>部分中定义您的卡片，然后使用<use>实例化每张卡片。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句