Sto tentando di aggiungere un'immagine al centro di un cerchio SVG. Ho provato con i modelliCome aggiungere un'immagine al centro del cerchio 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>
Ma non centrare l'immagine. Sto lavorando con Javascript.
Ok ho trovato la risposta. Quello che ho fatto è l'aggiunta di un filter al mio svg:
<filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "birds.png"/>
</filter>
e nel cerchio aggiungere attributi:
circle.setAttribute('filter','url(#i1)');
Clipping dovrebbe fare quello che stai cercando: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
Qualcosa di simile:
<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>
Potete vedere il risultato di questo esempio qui: http://jsbin.com/EKUTUco/1/edit?html,output
Fino a voi per centrare le immagini in javascript in base alle loro dimensioni, tramite gli attributi x e .
Grazie ma l'ho fatto alla fine con filtro [link] (http: //www.svgbasics .com/filters1.html) –
ok. due cose che dovresti controllare: 1. se hai bisogno del supporto IE9 (i filtri sono supportati solo da IE10, le clip funzionano in IE9) 2. prestazioni, nel caso in cui l'applicazione esegua un'elaborazione intensiva sul lato client. I filtri potrebbero essere più lenti dei clip. –
Grazie filtro è più lento di ritaglio, ma ha fatto il lavoro per me. –
che sembra un hack –