将背景图像（.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> svg元素的图像填充通过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>
那么，我无法用接受的答案来工作。 我是这样做的：
<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>
如果要自定义大小，请将其用作比例参考：
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>
（这个比例适用于平方图像）
我知道这是一个古老的问题，但我用filter来覆盖图像。 上面的解决scheme因为缩放而不适合我，看起来像图像是平铺的。 我用这个来代替，我希望它能帮助别人。
<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>
图像重复问题解决了正确的解释 （感谢AmeliaBR）
TL; DR：使用objectBoundingBox和preserveAspectRatio的概念！
<svg height = "10%" width = "10%"> <defs> <pattern id = "attachedImage" height = "100%" width = "100%" patternContentUnits = "objectBoundingBox"> <image xlink:href = "url.png" preserveAspectRatio = "none" width = "1" height = "1"/> </pattern> </defs> <circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/> </svg>
这是我的解决scheme，不同之处在于它不使用patternUnits="userSpaceOnUse"并指定了图像元素的所需宽度和高度。
<defs> <pattern id="{some name}" x="0" y="0" width="1" height="1"> <image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image> </pattern> </defs>
