Fermer

septembre 13, 2018

Utilisation de SVG avec des requêtes multimédias –6 minutes de lecture



Ce qui suit est un court extrait du prochain livre de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.

Avec les documents HTML, nous pouvons afficher, masquer ou réorganiser certaines parties du document. page basée sur les conditions de la fenêtre d'affichage. Si la fenêtre du navigateur fait 480 pixels de large, par exemple, nous pourrions déplacer notre navigation d'une liste horizontale à une liste verticale, pouvant être réduite. Nous pouvons faire quelque chose de similaire avec les requêtes médias et les documents SVG. Considérons un logo, tel que celui de Hexagon Web Design & Development ci-dessous.

 Un logo très réel pour une entreprise fictive

Sans requêtes de média, ce logo SVG serait simplement étendu ou rétréci pour s'adapter à la fenêtre ou à son conteneur . Mais avec les requêtes média, nous pouvons faire plus de choses intelligentes.

Distinguons la fenêtre de document HTML et la fenêtre de document SVG. Lorsque SVG est en ligne, la fenêtre HTML et la fenêtre d'affichage SVG sont identiques. Le document SVG se comporte comme tout autre élément HTML. D'un autre côté, lorsqu'un document SVG est lié – comme avec les éléments ou img – nous traitons de la fenêtre de visualisation du document SVG.

cas, mais lorsque le document SVG est lié, sa fenêtre d'affichage est indépendante de son document HTML. Dans ce cas, la taille de la fenêtre du navigateur ne détermine pas la taille de la fenêtre d'affichage SVG. Au lieu de cela, la taille de la fenêtre d'affichage est déterminée par les dimensions de l'élément iframe ou img . Prenez le document SVG (abrégé) qui suit comme exemple: [^4]


Dans des fenêtres plus petites, montrons seulement le H dans un symbole hexagonal:

 @media (max-width: 20em) {
    [id=word-mark] {
        affichage: aucun;
    }
}

Dans des fenêtres plus petites, montrons seulement le H dans un symbole hexagonal:

Maintenant, chaque fois que le conteneur de notre SVG est inférieur ou égal à 20em seule la partie symbole de notre logo sera visible

 Affichage / masquage d'éléments en fonction de la taille de la fenêtre d'affichage SVG

Pour déclencher cette vue à partir du document HTML, définissez la largeur du conteneur SVG:

   

Comme vous l'avez peut-être remarqué en regardant l'image ci-dessus, notre image SVG conserve ses dimensions intrinsèques même si une partie a été masquée. Ceci, malheureusement, est une limitation de SVG. Pour y remédier, nous devons modifier l'attribut viewBox du document SVG, mais uniquement lorsque la fenêtre est inférieure à une certaine taille. Ceci est un excellent cas d'utilisation pour matchMedia .

L'attribut viewBox comme son nom l'indique, détermine la zone visible d'un élément SVG. En l'ajustant, nous pouvons déterminer quelle partie d'une image SVG remplit la fenêtre d'affichage. Ce qui suit est un exemple utilisant matchMedia et une requête multimédia pour mettre à jour l'attribut viewBox :

 

Remarque: Les navigateurs sont un peu en désordre quand il s'agit de gérer l'événement SVGLoad . Dans mes tests, addEventListener fonctionnait le mieux avec Firefox. Pour obtenir les meilleurs résultats dans Chrome et Safari, utilisez l'attribut d'événement onload . Microsoft Edge fonctionne également mieux avec onload mais uniquement lorsqu'il est utilisé en tant qu'attribut de la balise . En d'autres termes, .

Maintenant, chaque fois que le conteneur SVG est 20em ou moins, la valeur de viewBox sera "0 0 200 174 ". Quand il dépasse 20em viewBox sera restauré à sa valeur initiale, comme indiqué ci-dessous.

 Ajustement de l'attribut viewBox en fonction de la largeur de la fenêtre

Remarque: Pour plus d'informations sur la création de documents SVG interactifs, lisez le chapitre « Dynamic SVG and JavaScript » de Une introduction SVG pour les navigateurs actuels du W3C.

Étant donné que cette technique utilise l’attribut d’événement onload onload ou l’événement SVGLoad il est conseillé d’intégrer nos CSS et JavaScript dans le fichier SVG. Lorsque CSS est externe, l'événement SVGLoad peut se déclencher avant que le chargement du CSS associé ne soit terminé.

Utilisation de requêtes multimédia avec taille d'arrière-plan

Les documents SVG et les requêtes multimédias ne sont pas limités au premier plan images. Nous pouvons également redimensionner la fenêtre d'affichage SVG en utilisant la propriété CSS background-size . Tous les navigateurs les plus récents prennent en charge cette technique, mais pas les anciennes versions de navigateur. Soyez prudent lorsque vous utilisez cette technique en production.

Nous allons commencer avec ce document SVG:



    
    
    
    

Ceci est un cas simple. Nos éléments circle obtiendront une nouvelle couleur de remplissage à des largeurs de fenêtre spécifiques. Lorsque la fenêtre d'affichage a une largeur de 20 pixels, le remplissage sera sarcelle. Quand elle a 300 pixels de large, elle sera jaune.

Pour que cela fonctionne, nous devons utiliser notre image SVG comme image d’arrière-plan et définir la propriété de fond du sélecteur . Dans ce cas, nous utiliserons notre image comme arrière-plan pour les éléments body et li . L'image ci-dessous montre les résultats:

 body, li {
    background: url (../ images / circles.svg);
}
corps {
    couleur d'arrière-plan: # 9c27b0;
    taille d'arrière-plan: 300px auto;
}
li {
      taille d'arrière-plan: auto 20px;
      répétition d'arrière-plan: pas de répétition;
      position de fond: gauche 3px;
      padding-left: 25px;
}

 Manipulation de la fenêtre SVG avec la propriété de taille CSS






Source link