Làm thế nào để thêm hình ảnh vào trung tâm của vòng tròn svg?

Question

Tôi đang cố gắng thêm hình ảnh vào giữa vòng tròn SVG. Tôi đã thử với các mẫu

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

Nhưng nó không làm trung tâm hình ảnh. Tôi đang làm việc với Javascript.

Answer 1

Ok tôi đã tìm thấy câu trả lời. Những gì tôi đã làm là thêm một filter để svg của tôi:

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

và trong vòng tròn thêm thuộc tính:

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

Answer 2

Clipping nên làm những gì bạn đang tìm kiếm: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

Cái gì như:

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

Bạn có thể xem kết quả của ví dụ này ở đây: http://jsbin.com/EKUTUco/1/edit?html,output

Up cho bạn để tập trung những hình ảnh trong javascript theo kích thước của chúng, thông qua các thuộc tính x và y.