Est-il possible d'utiliser de l'HTML .querySelector() pour sélectionner par l'attribut xlink dans un SVG?

Donné:

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <a xlink:href="url"></a>
    </svg>
</body>

Est-il possible d'utiliser le DOM HTML de .querySelector() ou .querySelectorAll() pour sélectionner le lien à l'intérieur de la SVG par le contenu de son xlink:href attribut?

Cela fonctionne:

document.querySelector('a')                    //<a xlink:href="url"/>

Ce n'est pas:

document.querySelector('[href="url"]')         //null
document.querySelector('[xlink:href="url"]')   //Error: not a valid selector
document.querySelector('[xlink\:href="url"]')  //Error: not a valid selector
document.querySelector('[xlink\\:href="url"]') //null

Est-il un moyen de l'écriture qui sélecteur d'attributs pour en faire "voir" l' xlink:href?

InformationsquelleAutor stephband | 2014-04-12

39

Requête sélecteur de peut gérer les espaces de noms, mais ce qui est difficile parce que
1. La syntaxe pour spécifier des espaces de noms dans les sélecteurs CSS est différent de html;
2. La querySelector de l'API n'a pas toute la méthode de l'attribution d'un préfixe d'espace de noms (comme xlink) à un espace de noms (comme "http://www.w3.org/1999/xlink").
Sur le premier point, la partie pertinente de la CSS specs vous permet de spécifier pas espace de noms (par défaut), un espace de noms spécifique, ou tout espace de noms:
```
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }
```
La première règle correspond seulement les éléments avec l'attribut att dans le "http://www.example.com" espace de noms avec la valeur "val".

La deuxième règle correspond seulement les éléments avec l'attribut att indépendamment de l'espace de nom de l'attribut (y compris l'absence d'espace de noms).

Les deux dernières règles sont équivalentes et correspond seulement les éléments avec l'attribut att où l'attribut est pas dans un espace de noms.
Voir ce violon, en accordant une attention à le remplir de styles (par défaut, hover, active):

https://jsfiddle.net/eg43L/

L'API de Sélecteurs adopte le sélecteur CSS la syntaxe, mais n'a pas d'équivalent à la @namespace règle pour définir un espace de noms. En conséquence, les sélecteurs avec les espaces de noms ne sont pas valide mais le générique de l'espace de noms jeton est valide:

Si le groupe de sélecteurs inclure des préfixes d'espace de noms qui doivent être résolus, la mise en œuvre doit soulever un SYNTAX_ERR exception ([DOM NIVEAU 3-CORE], section 1.4).

Cette spécification ne fournit pas de support pour la résolution arbitraire préfixes d'espace de noms. Toutefois, le soutien pour un préfixe d'espace de noms mécanisme de résolution peuvent être considérés pour inclusion dans une future version de ce cahier des charges.

Un préfixe d'espace de noms doit être résolu si l'espace de noms composant est ni vide (par exemple,|div), représentant l'espace de noms null, ou par un astérisque (par exemple *|div), représentant tout l'espace de noms. Depuis l'astérisque ou vide préfixe d'espace de noms n'ont pas besoin d'être résolu, les mises en œuvre qui prennent en charge l'espace de noms de la syntaxe des Sélecteurs de prise en charge de ces.

(caractères gras ajoutés)

Découvrez le violon encore une fois, ce temps de prêter attention à la sortie de la console. La commande document.querySelector('[*|href="#url"]') retourne l'élément que vous voulez.

Un avertissement final: MDN me dit que IE8 - ne prennent pas en charge CSS espaces de noms, donc cela pourrait ne pas fonctionner pour eux.

Mise à jour 2015-01-31:

Comme @Netsi1964 souligné dans les commentaires, cela ne fonctionne pas pour coutume des espaces attributs HTML 5 de documents, depuis le HTML ne prend pas en charge les espaces de noms XML. (Il serait de travailler dans un stand-alone SVG ou autre document XML, y compris XHTML.)

Lorsque le parser HTML5 rencontre un attribut comme data:myAttribute="value" il le considère comme une simple chaîne de caractères pour le nom de l'attribut, y compris la :. Pour rendre les choses plus confuses, il s'est auto-petit caractère de la chaîne.

Pour obtenir querySelector pour sélectionner ces attributs, vous devez inclure le data: dans le cadre de la chaîne d'attribut. Cependant, depuis la : a une signification spéciale dans les sélecteurs CSS, vous avez besoin de l'échapper avec un \ caractère. Et puisque vous avez besoin de la \ pour obtenir traversé dans le cadre de la sélection, vous devez vous échapper il dans votre JavaScript.

Le succès de l'appel considère donc comme:
```
document.querySelector('[data\\:myattribute="value"]');
```
Pour rendre les choses un peu plus logique, je recommande l'utilisation de tous les bas-de-casse pour vos noms d'attribut, puisque le HTML 5 de l'analyseur se convertir eux de toute façon. Blink/navigateur Webkit auto-minuscules sélecteurs de vous passer querySelector, mais c'est effectivement une très problématique bug (dans signifie que vous pouvez ne jamais sélectionner des éléments SVG avec un mélange de cas, des noms de balises).

Mais la même solution de travail pour xlink:href? Non! Le HTML 5 de l'analyseur reconnaît xlink:href en SVG de marquage et d'analyse correctement comme un espace de noms d'attribut.

Voici la mise à jour du violon avec des tests supplémentaires. Encore une fois, regardez la sortie de la console pour voir les résultats. Testé dans Chrome 40, Firefox 35, et IE 11; la seule différence dans le comportement, c'est que Chrome correspond à l'mixte du sélecteur.
- Ha! C'est génial! Il fonctionne! Je vous remercie. (Je n'aime pas sur IE8, comme il ne fait pas de SVG de toute façon).
- Juste pour être clair, ce qui va sélectionner aucun l'attribut avec localName href, et pas seulement des attributs dans la "http://www.w3.org/1999/xlink" espace de noms, correct?
- Oui. Le générique signifie "tout ou pas d'espace de noms". Donc, si vous voulez la distinction entre a éléments dans votre SVG et d'autres ancres ou les éléments de href de la propriété, vous aurez besoin d'être plus explicite avec le reste de la sélection. (Et oui, je suis totalement ne pensais pas le fait que IE8 n'était pas pertinent pour le SVG...)
- J'ai ajouté un espace de noms data d'un élément SVG, et l'utilisation d'un attribut personnalisé dans l'espace de nom onewaybinding, mais je ne peut pas détecter les éléments avec cet attribut à l'aide de: document.querySelectorAll("[*|onewaybinding]"). Donc je suis retourné au bon vieux attributs des données, il donne une erreur de validation, mais je peux trouver les éléments à l'aide querySelector 🙂 data-onewaybinding peut être trouvé à l'aide de document.querySelector("[data-onewaybinding]")
- C'est ennuyeux (mais bon à savoir!). J'ai joué un peu -- voir les mises à jour pour la réponse. Je pense que j'irais avec votre solution, et au diable les validateurs. Le W3C SVG groupe de travail a été discuté officiellement permettant HTML 5 de style data- attributs sur les éléments SVG SVG 2, tout simplement parce que beaucoup de gens déjà les utiliser. Cependant, il n'y a aucun moyen de vraiment décrire en XML schémas de validation.
- han! document.querySelector('[*|href="#url"]') ne fonctionne pas sous IE... (de 9 à 11 testé)
- Confirmé. Je ne sais pas pourquoi je n'ai pas pris l'année dernière. Le xlink sélecteur de travaux dans le CSS (hover effet dans le fiddle), mais vous ne pouvez pas utiliser des espaces de noms avec querySelector. Pas de chance, vous pouvez tester pour voir si cela fonctionne en Edge, pouvez-vous?
- (Aussi, je ne suis pas sûr de ce qui a changé avec JSFiddle, mais IE refuse d'exécuter le script dans le violon à tous; j'ai dû essayer la querySelector appels directement à partir de la console de ligne).
- Installé un Bord VM, peut confirmer là aussi. Et il n'a même pas jeter une erreur, il n'a tout simplement pas trouver quoi que ce soit... La seule vérification qui peut être fait semble tout d'abord ajouter un élément avec un tel espace de noms d'attribut et puis essayer de l'obtenir...
- Désolé, je suis tellement en retard, mais est-il possible de sélectionner le plein "xlink:href', au lieu de simplement 'href' avec un espace de noms peut ou peut ne pas être "xlink'? Étrangement, c'était le principal but de la question, mais il n'a même pas été évoquées dans la réponse ou de l'une de ces commentaires. Ils n'ont même pas dire "Vous ne pouvez pas le faire".
- Non, il n'y a pas de manière directe à partir de JavaScript pour spécifier explicitement un espace de noms. Vous pouvez le faire à partir de CSS, avec @namespace, de sorte que dans les navigateurs modernes, vous pouvez définir un CSS variable, puis tester la valeur de JS.
InformationsquelleAutor AmeliaBR
6

Malheureusement pas.

querySelector ne gère pas les espaces de noms XML, donc il n'y a pas de moyen facile de le faire de cette façon. Vous pouvez cependant utiliser un XPath requête.
```
var result = document.evaluate(
    //Search for all nodes with an href attribute in the xlink namespace.
    '//*[@xlink:href="url"]',
    document,
    function(prefix){
        return {
            xlink: "http://www.w3.org/1999/xlink"
        }[prefix] || null;
    },
    XPathResult.ORDERED_NODE_ITERATOR_TYPE
);

var element = result.iterateNext();
```
Si vous avez besoin de la pleine charge des navigateurs, comme pour IE, qui n'ont pas de document.evaluate, vous pouvez polyfill avec wicked-bon-xpath.

Bien sûr, selon votre utilisation, il peut être plus facile de le faire (ce qui je pense va travailler sur IE):
```
var element = Array.prototype.filter.call(document.querySelectorAll('a'),
    function(el){
    return el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') === 'url';
})[0] || null;
```
- Il apparaît qu'il y a pas Internet Explorer prise en charge des requêtes XPath.
- Je suis upvoting parce que j'ai appris quelque chose d'utile, mais j'hésite à le marquer correct parce que je ne veux pas que les autres à l'aide de démarrer les choses qui ne fonctionnent pas x-navigateur. Je suppose que la bonne réponse est "non".
- Mis à jour.
- Oui, j'ai déjà mis en place ce filtre matrice de version, bien qu'il ressemble plus à [edit: ah, gadgets, ne peut pas mettre le code ici lisible].
- Le polyfill devrait fonctionner pour vous.
- Ok, merci, tous les trucs utiles. Je vais rester avec le filtre de la matrice de la version que je n'ai pas le site que je suis en train d'écrire, et j'ai besoin d'être conscient de bibliothèques externes.
InformationsquelleAutor loganfsmyth
4

[*|href] va correspondre à la fois html href et svg xlink:href, puis utilisez :not([href]) à exclure html href.
```
document.querySelectorAll('[*|href]:not([href])')
```
testé dans chrome

InformationsquelleAutor cuixiping

Vous devez vous connecter pour publier un commentaire.