Возможно ли это? Следующее - это то, что я пробовал, но он полностью заполняет круг черным цветом.
<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>
(Эта шкала работает для квадратов изображений)
Я знаю, что это старый вопрос, но я использовал фильтр для наложения изображения. Вышеупомянутое решение не работало для меня из-за масштабирования, и казалось, что изображения были выложены плиткой. Я использовал это вместо этого, я надеюсь, что это тоже поможет другим.
<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>
Это мое решение, различия в том, что это не использует 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>