将背景图像（.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&nbsp;width="700"&nbsp;height="660"> &nbsp;&nbsp;<defs> &nbsp;&nbsp;&nbsp;&nbsp;<pattern&nbsp;id="image"&nbsp;x="0"&nbsp;y="0"&nbsp;patternUnits="userSpaceOnUse"&nbsp;height="1"&nbsp;width="1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<image&nbsp;x="0"&nbsp;y="0"&nbsp;xlink:href="url.png"></image> &nbsp;&nbsp;&nbsp;&nbsp;</pattern> &nbsp;&nbsp;</defs> &nbsp;&nbsp;<circle&nbsp;id='top'&nbsp;cx="180"&nbsp;cy="120"&nbsp;r="80"&nbsp;fill="url(#image)"/></svg>

Answer 2

我知道这是一个老问题，但我使用过滤器覆盖图像。上面的解决方案对我来说不起作用，因为缩放并且看起来图像是平铺的。我用它代替，我希望它也能帮助别人。<svg&nbsp;width="700"&nbsp;height="660"> &nbsp;&nbsp;&nbsp;&nbsp;<filter&nbsp;id="this_image"&nbsp;x="0%"&nbsp;y="0%"&nbsp;width="100%"&nbsp;height="100%"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<feImage&nbsp;xlink:href="test_image.png"/> &nbsp;&nbsp;&nbsp;&nbsp;</filter> &nbsp;&nbsp;&nbsp;&nbsp;<circle&nbsp;filter="url(#this_image)"&nbsp;cx="180"&nbsp;cy="120"&nbsp;r="80"&nbsp;/></svg>