J'ai ce conteneur SVG avec des chemins. Je veux le modifier, de sorte que le remplissage des chemins sera un motif. Ceci est ma tentative échouée:
i Ajouter un gradient: p> puis changez les chemins "remplissage: p> $(base + ' svg path').each(function() {
this.setAttribute('fill','url(#MyGradient)')
}
4 Réponses :
Je pense que vous devrez utiliser le plugin SVG pour JQuery (trouvé ici ). Lorsque vous ajoutez des éléments SVG à l'aide de la bibliothèque de jQuery "normale", les espaces de noms sont probablement mélangés.
Essayez ce qui suit: (pas vraiment sûr. Vous pourriez Besoin de violez un peu un peu avec ce code.) edit vient de créer ce violon afin de tester la thèse (comme suggéré par @phrogz). En effet, il renvoie http://www.w3.org/1999/xhtml comme espace de noms pour l'inséré
@chac c'est facile à faire; juste console.log ($ ('# mygradient') [0] .namespaceuri) ; Si ce n'est pas http://www.w3.org/2000/svg alors c'est le problème. Sirko devrait faire cela plutôt que de spéculer.
Phrogz, Thip Tip a sauvé ma journée. Merci
trouvé une solution. C'est un peu moche, mais ne nécessite pas l'utilisation de plugins supplémentaires.
Apparemment, un motif doit être inclus dans la balise lorsque le SVG est créé (il ne s'agit probablement que).
Ainsi, le remplacement du contenu de l'emballage de la balise SVG avec des œuvres d'accès à eux-mêmes ( étant ce wrapper):
Est-ce que je comprends correctement que vous utilisez juste JQuery et dans votre script attribue (à dire) base = $ ('# incorpor_container_id') ? Je me batte avec jquery.svg et je manque toujours d'où les parties communes des VS spécifiques sont ....
La raison pour laquelle cela fonctionne est que placer l'élément à l'intérieur du
Votre problème (ce que vous êtes "manquant") est que JQuery crée de nouveaux éléments de l'espace de noms XHTML, tandis que les éléments SVG doivent être créés dans l'espace de noms SVG. Vous ne pouvez pas utiliser de code brut dans une chaîne pour les éléments SVG.
La méthode la plus simple (sans plug-ins) consiste à arrêter de se pencher sur jQuery tellement et utilisez simplement des méthodes de DOM simples pour créer les éléments. Oui, c'est plus verbeux que d'utiliser JQuery pour construire magiquement vos éléments pour vous ... mais JQuery ne fonctionne pas dans ce cas.
Alternativement, vous peut inclure plug-in Keith Woods '"JQuery SVG" qui a beaucoup de méthodes de commodité pour les opérations SVG communes, y compris la capacité de créer des gradients linéaires .
+1: Je conviens que nous devrions compter moins sur JQuery, mais comment Verbose est le code WRT de l'extrait de l'OP. Mais merci d'avoir appris à Jsfiddle avec un code utile.
@CHAC Quelle est l'efficacité du code TERSE si cela ne fonctionne pas? :) Ceci est similaire à ce que le plug-in Jquery SVG de Keith Woods 'JQuery Woods, et en plaçant le code DOM dans une fonction réutilisable, le code pour créer réellement le gradient est moins que le XML JQUERY RAW.
Merci pour la pointe, je ne savais pas que les éléments avaient des noms nommés. J'ai finalement trouvé une manière plus jackery et de faire cela. Je l'ai posté sur ma réponse
Y a-t-il une méthode qui n'utilise pas JavaScript? Certains sites Web n'autorisent pas JavaScript à l'intérieur des images SVG.
Vraiment utile pour créer des gradients dynamiques.
Je veux juste passer et dire que j'ai trouvé une solution plus élégante qui vous permet de continuer à utiliser jQuery avec des éléments SVG, mais sans la bibliothèque de JQuery SVG (qui n'est plus mise à jour et a des problèmes avec JQuery 1.8 ou plus ).
Utilisez simplement une fonction comme ceci: Il crée un élément SVG sur l'espace de noms SVG et l'encapsule avec jQuery, une fois que l'élément est créé dans l'espace de nom droit, vous pouvez l'utiliser librement avec JQuery: Vous pouvez ensuite utiliser la fonction de cette manière: Ce n'est pas aussi compact que vous voudrez peut-être que ce soit puisque vous devez créer chaque élément. à la main, mais c'est beaucoup mieux que de tout manipuler avec des méthodes DOM. une petite note, la fonction jQuery .attr () suppose que tous les attributs sont mocassés, ce qui n'est pas le cas pour les éléments SVG (par exemple la VIEWBOX Attribut dans
Essayé à plusieurs reprises et ne peut pas sembler le faire fonctionner. Pouvez-vous nous fournir un violon afin que nous puissions le voir en action?
Hey @fizzix, je vois que tu as édité ma réponse, il y avait des erreurs. Vous avez travaillé? Quoi qu'il en soit, je veux juste ajouter que les attributs des éléments SVG sont sensibles à la casse. jQuery .attr () fonction suppose qu'ils ne sont pas. Je vais éditer la réponse et ajouter ces informations.
Hey @hoffmann :) - Malheureusement, je ne pouvais pas le faire travailler à la fin et je suis allé pour Solution Phroganz.