将背景图像（.png）添加到SVG圆形

Question

将背景图像（.png）添加到SVG圆形这可能吗？以下是我尝试过但它完全用黑色填充圆圈。<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>

Answer 1

通过SVG Patterns实现svg元素的图像填充...

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

Answer 2

我知道这是一个老问题，但我使用过滤器覆盖图像。上面的解决方案对我来说不起作用，因为缩放并且看起来图像是平铺的。我用它代替，我希望它也能帮助别人。

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