svg背景图

发表于 svg 分类，标签:
15 10月 2015
0

Add a background image (.png) to a SVG circle shape

  

13down votefavorite
5

Is this possible? The following is what I tried but it completely fills the circle with black.

    <svg id='vizMenu' width="700" height="660">
        <defs>
            <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
            <feOffset dx="0.5" dy="0.8" result="offsetblur"/> 
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
            </filter>
        </defs>
        <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
        <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
        <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/>
    </svg>
  
shareimprove this questionasked Jul 16 '12 at 0:10Tejen Shrestha1,42021430

1 Haha there are lots of them, I think they feel strong hiding behind their computers. Good luck with your problem – Cleverbot Jul 16 '12 at 1:40   I didn't downvote you, but perhaps it's because the code you posted is for applying a dropshadow, not an image fill! – Duopixel Jul 16 '12 at 8:04   Nevermind, the non-working code for fill is offscreen. When posting code try to reduce it to the minimum. – Duopixel Jul 16 '12 at 8:12   You can't reference a PNG directly from a fill or stroke attribute at the moment. You'll have to wrap the image in a pattern element and define how it should be tiled and scaled. See the answer from Duopixel. – Erik Dahlström Jul 16 '12 at 10:421 possible duplicate of Fill SVG path element with a background-image – Erik Dahlström Jul 16 '12 at 13:58
up vote22down voteaccepted

An image fill for an svg element is achieved through SVG Patterns...

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>
shareimprove this answeredited Nov 22 '13 at 0:57Michael Mullany11.3k12860answered Jul 16 '12 at 8:10Duopixel34.2k1479115

   It is possible to do with SVG filters too, but patterns is the natural answer. – Erik Dahlström Jul 16 '12 at 10:363 Can we stop replicate png display in background using fill. In this case it will keep replicating the image in background. Is it possible to display pattern only once? I mean no tiling... – vicky Feb 13 '13 at 15:46 2 closing defs tag missing – user2070775 Sep 27 '13 at 16:05    I closed that tag for you – Michael Mullany Nov 22 '13 at 0:58   Is there a way to stop the pattern from repeating, having it scale to fit instead? – Jeff Paquette Sep 7 at 13:12
up vote6down vote

Well, I couldn't make it work with the accepted answer. This is how I ended up doing it:

<svg width="100" height="100">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
</svg>

If you want to customize the size, use this as a scale reference:

x = yourPreferredSize

<svg width=">2x" height=">2x">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height=">2x" width=">2x">
      <image x="0" y="0" height="2x" width="2x" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/>
</svg>

(This scale works for squared images)

shareimprove this answeredited Jun 10 '14 at 14:20answered Jun 9 '14 at 20:12Teo Inke1,152815

   Even I couldn't get it working with the accepted answer. Thanks for your answer. – Nav Oct 27 '14 at 11:451 How do I stop it from repeating? also it's not scalling properlly – Astronaut Oct 27 '14 at 15:19
up vote4down vote

I know this is an old question, but I used a filter to overlay the image. The above solution didn't work for me because of scaling and it seemed like the images was tiled. I used this instead, I hope it will help others as well.

<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" />
</svg>
shareimprove this answeredited Feb 23 at 18:43answered Feb 23 at 18:07Arian Faurtosh4,43453471

转自 （ http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape  ）

0 篇评论

发表我的评论