Definisci un rettangolo di origine per un SVG <image> come puoi in HTML Canvas o CSS

Question

In HTML5 Canvas puoi disegnare un'immagine nel suo complesso, o disegnarne solo una parte, o disegnarne solo una parte in un rettangolo arbitrario (che può ridimensionarlo).

Ecco un esempio di tutti e tre:

Ecco il codice usato per disegnare questi tre esempi:

ctx.drawImage(img, 0, 0); 

ctx.drawImage(img, 
       // source rect 
       50, 50, 70, 70, 
       // destination rect 
       0, 200, 70, 70 
      ); 

ctx.drawImage(img, 
       // source rect 
       50, 50, 70, 70, 
       // destination rect 
       0, 270, 30, 30 
      ); 

Questo è anche relativamente facile da fare in CSS.

La mia domanda è, per una determinata immagine, come si possono ottenere gli stessi effetti con gli elementi SVG <image>?

Come faccio, ad esempio, a creare un'immagine che occupa 50x50 pixel, che mostra una porzione di href di riferimento, come nel primo ritaglio?

Uno potrebbe utilizzare un tracciato di ritaglio per ritagliare parte dell'immagine, ma quindi (apparentemente) non è possibile utilizzare un tracciato di ritaglio di un'immagine più grande mentre si definisce la larghezza e l'altezza dell'elemento <image> come piccolo.

Ecco un violino con il codice di cui sopra, più un elemento di esempio SVG:

http://jsfiddle.net/wcjVd/

Answer 1

non hai bisogno di un clipPath a tutti, è possibile utilizzare il viewBox per fare ciò che si vuole

<svg width="70px" height="70px" viewBox="50 50 70 70">  
    <image x="0" y="0" width="200" height="200" 
     xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)"> 
    </image> 
</svg> 

il valore dell'attributo viewBox è un elenco di quattro numeri <min-x>, <min-y>, <width> e <height>, separati da spazi bianchi e/o una virgola, che specificano un rettangolo nello spazio utente che deve essere mappato ai limiti della finestra creata dall'elemento specificato, tenendo conto dell'attributo preserveAspectRatio.

Demo Here

contento di poter aiutare qui perché mi hai aiutato con un progetto Canvas qualche mese fa!

Modifica

Hai detto che avevi bisogno di trasformarli anche, così dopo un'ora mi si avvicinò con queste opzioni paio:

Se è possibile, trasformare l'immagine originale e fare lo stesso effetto .Demo here Se si vogliono l'immagine ritagliata all'origine (0,0) allora il codice sarebbe simile

<defs> 
    <clipPath id="myClip"> 
     <rect x="0" y="0" width="70" height="70"/> 
    </clipPath> 
</defs> 
    <image x="-50" y="-50" width="200" height="200" clip-path="url(#myClip)" 
      xlink:href="http://placekitten.com/200/200"></image> 

O, più soddisfacente, si potrebbe fare con un use

<defs> <!-- Your original clip --> 
    <clipPath id="myClip"> 
     <rect x="50" y="50" width="70" height="70"/> 
    </clipPath>   
</defs> 
<image id="myImage" x="0" y="0" width="200" height="200" 
     xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)" /> 

<!-- Hide the original (I made a layer of white) --> 
<!-- This is the part that you could probably find a better way of doing --> 
<rect x="0" y="0" width="200" height="200" style="fill:white" /> 

<!-- Create what you want how you want where you want it --> 
<use x="-50" y="-50" width="200" height="200" xlink:href="#myImage" transform="scale(1.3)"/> 
</svg> 

Demo for that approach here