1

I am new on stackoverflow.

I face a problem in svg code. I want to draw a container with a background image but when I set an image it breaks into 4 parts and gives a white space in mid of container.

This is my SVG code:

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

You can see this code in running stage by using this url

I have already tried the following:

  1. How to set a SVG rect element's background image?
  2. Fill SVG path element with a background-image
Community
  • 1
  • 1
Codeiginiter
  • 99
  • 1
  • 12

1 Answers1

2

Using a <pattern> may not be the best way to do what you want. It can be done though.

If you are using a pattern, stick to the default patternUnits (objectBoundingBox), and set width and height to 1. Then set the width and height of your image to the max width or height of the region you are trying to fill. In the case of your example shapes, that appears to be 300. Then adjust the x and y of the <image> so it is centred in your shape.

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

Demo: http://jsfiddle.net/TRLa7/1/

Personally, I would use a <clipPath> for this situation. Use your path shape as the clipPath for the image. You will need to add an additional copy of the <path> to apply your stroke effects etc. You can define your card(s) in the <defs> section and then use a <use> to instantiate each card.

Demo: http://jsfiddle.net/TRLa7/2/

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • thnk you very much @BigBadboom for give me reply but you use `foreignObject` and i want to use `text` because i want replace the image onclick of cards and then fill the text which is not shown in IE when i use `foreignObject`.. – Codeiginiter Feb 05 '14 at 08:08
  • BigBadaboom its very pleasent if you tell me about how to remove the image from background in run time using javascript/Jquery.
    I want only white background with blue border because i fill the text in the rectangle     – Codeiginiter Feb 05 '14 at 08:16
  • You can remove the ``. They are not related to the solution. I just left them in there because they were in your original file. – Paul LeBeau Feb 05 '14 at 15:21
  • You can change the background using CSS. Just change `fill: url(#imgDo);` to `fill: white;`. To do the same thing using jQuery, you could use something like `$("#doCard path").css("fill", "white");` – Paul LeBeau Feb 05 '14 at 15:28
  • **BigBadaboom** i want to vote up for your very helpful answer. I really want to say thanx for help me. when i vote up it message show you need 15 reputation for vote-up. Sorry for that .. – Codeiginiter Feb 06 '14 at 07:26