jQuery Girl
  1. jQuery Girl
  3. Recadrage de la vue SVG avec jquery
Intereting Posts
jqPlot avec DateAxisRenderer et ajax Empêcher le défilement de la fenêtre Comment append un retard sur le survol de Bootstrap Dropdown Recherche multiple avec plusieurs champs par défaut Comment empêcher plusieurs incendies pour l’événement de défilement? jquery ajax ($ .post) affichant une icône pendant le traitement de la demande Twitter Bootstrap – Effectue une action sur l’événement de l’onglet «affiché» jQuery: Sélection d’un élément à l’intérieur d’un élément déjà sélectionné jQuery: fermeture en fondu, modification de l’image d’arrière-plan, puis ouverture en fondu Obtenir un élément parent pour un sélecteur jQuery Quelle est la différence entre la cascade et le chaînage Comment remplacer une balise HTML par une autre balise dans jQuery? jQuery: comment inclure la validation dans la fonction ajaxForm? déclencher un événement clic dans la fenêtre parent iframe Convertissez la date au format jj / mm / aaaa dans JQuery

Recadrage de la vue SVG avec jquery

Je suis en train de faire un autocollant pour mon client. Ils ont besoin d’un recadrage dans une image SVG donnée. Cette image SVG n’a pas la forme d’un visage d’Halloween (voir ci-dessous).

entrez la description de l'image ici

Lorsque je télécharge une image, elle s’affiche dans l’image donnée. Le rest de l’image va se cacher.

Comment puis-je atteindre cet objective?

C’est vraiment très facile avec SVG clipPaths. Il prend également en charge les navigateurs, sauf bien entendu IE. 

.defs { position: absolute; width: 0; height: 0; } .demo { text-align:center; } .star image { clip-path: url(#star-clip); } .hex image { clip-path: url(#hex-clip); } .heart image { clip-path: url(#heart-clip); } .shape image { clip-path: url(#shape-clip); }