1

I need to add a background image to my SVG circle. But, nothing I've tried thus far has worked.

Here's what I've tried so far...

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">                     
    <defs>
        <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px">
            <image x="0" y="0"height="40px" width="40px" xlink:href="url.png"></image>
        </pattern>
    </defs>
    <g transform="translate(40,40)">
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image)"></circle>
    </g>
</svg>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">      
    <g transform="translate(40,40)">               
        <defs>
            <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px">
                <image x="0" y="0" height="40px" width="40px" xlink:href="url.png"></image>
            </pattern>
        </defs>
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image)"></circle>
    </g>
</svg>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">           
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="url.png"/>
    </filter>   
    <g transform="translate(40,40)">  
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#this_image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#this_image)"></circle>
    </g>
</svg>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">      
    <g transform="translate(40,40)">          
        <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
            <feImage xlink:href="url.png"/>
        </filter>
        <circle cx="0" cy="0" r="20" class="circle base" fill="url(#this_image)"></circle>
        <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#this_image)"></circle>
    </g>
</svg>

Here's a jsfiddle mockup.

Would appreciate any suggestions. Clearly, I'm unsure whether the filter/defs-pattern should go inside the SVG or the transform

s15199d
  • 7,261
  • 11
  • 43
  • 70
  • Filters are non-renderable elements (by themselves I mean), so technically it doesn't matter where you put them. By convention they should be put in a `` section. It does matter that you don't have two filters with the same `id` though - which you have in your example. – Paul LeBeau Jul 05 '17 at 16:43
  • BTW, it would be helpful if you turned your block of code into a working [MCVE] – Paul LeBeau Jul 05 '17 at 16:44
  • Thanks @PaulLeBeau i do not have duplicate IDs in my actual code. Each of those 4 SVG configurations were attempted independently. – s15199d Jul 07 '17 at 14:58
  • @PaulLeBeau I don't believe this question is a duplicate of the one you deem this to be a duplicate of, as my SVG is animated and the one you think is a dup, is not animated. – s15199d Jul 07 '17 at 15:39

1 Answers1

1

Your pattern fills are not working for one simple reason. This:

circle { ... fill:none; ... }
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks @PaulLeBeau! That now shows the image repeating and not centered. Any suggestions for centering the background image? – s15199d Jul 10 '17 at 11:51
  • If you set `preserveAspectRatio="xMidYMid slice"` on the image, it should be centred in the box you provide. If you can't work it out, ask a new question. – Paul LeBeau Jul 10 '17 at 13:16