Как добавить изображение в центр круга SVG?

Question

Я пытаюсь добавить изображение в центр круга SVG. Я попытался с узорами

<pattern id="image_birds" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100"> 
<image x="0" y="0" xlink:href="birds.png" height="50" width="50"></image> 
</pattern> 

Но это не центр изображения. Я работаю с Javascript.

Answer 1

Хорошо, я нашел ответ. То, что я сделал это добавление filter моему: SVG

<filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%"> 
    <feImage xlink:href = "birds.png"/> 
</filter> 

и в кружке добавить атрибут

circle.setAttribute('filter','url(#i1)'); 

Answer 2

Отсечение должны делать то, что вы ищете: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

Что-то вроде:

<clipPath id="cut-off-bottom"> 
    <circle cx="100" cy="100" r="50" /> 
</clipPath> 

<image x="25" y="25" xlink:href="http://placehold.it/150.png" height="150" width="150" clip-path="url(#cut-off-bottom)" ></image> 

Вы можете увидеть результат этого примера здесь: http://jsbin.com/EKUTUco/1/edit?html,output

До вас в центр изображения в javascript в соответствии с их размерами, через атрибуты x и y.