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ẫuLàm thế nào để thêm hình ảnh vào trung tâm của vòng tròn 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>
Nhưng nó không làm trung tâm hình ảnh. Tôi đang làm việc với Javascript.
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)');
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.
Thanx nhưng tôi đã làm nó cuối cùng với bộ lọc [link] (http: //www.svgbasics .com/filters1.html) –
ok. hai điều bạn nên kiểm tra: 1. cho dù bạn cần hỗ trợ IE9 (bộ lọc chỉ được hỗ trợ như IE10, clip làm việc trong IE9) 2. hiệu suất, trong trường hợp ứng dụng của bạn thực hiện xử lý phía máy khách chuyên sâu. Bộ lọc có thể chậm hơn clip. –
Cảm ơn bộ lọc chậm hơn cắt nhưng nó đã làm việc cho tôi. –
trông giống như một hack –