Comment utiliser SVG Feuille Sprite CSS background-image tout en maintenant le ratio d'aspect et de l'évolutivité

TL;DR: je veux utiliser plusieurs icônes en mosaïque dans une SVG de la feuille sprite CSS background-images, qui maintiennent leur ratio d'aspect et de mise à l'échelle automatique pour remplir le parent de l'élément en utilisant rien mais SVG et CSS. Pas de JavaScript s'il vous plaît.

J'ai donc un spritesheet au format SVG que j'ai fait avec une combinaison de SVG-Edit et un peu de la main-codage dans Notepad++. Voici le code source:

<svg version="1.1"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="600"
height="400"
viewBox="0 0 600 400">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/-->
<title>chosen_sprite</title>
<g>
<title>Add</title>
<rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="5" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
<line id="svg_2" y2="50" x2="70" y1="50" x1="30" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
<line id="svg_3" y2="30" x2="50" y1="70" x1="50" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
</g>
<g>
<title>Delete</title>
<rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="105" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
<line id="svg_2" y2="70" x2="170" y1="30" x1="130" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#ff0000" fill="none"/>
<line id="svg_3" y2="30" x2="170" y1="70" x1="130" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#ff0000" fill="none"/>
</g>
<g>
<title>Expand Dark</title>
<rect stroke="#505050" id="svg_1" height="90" width="90" y="5" x="205" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none"/>
<line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="250" y1="65" x2="280" y2="35" id="svg_2"/>
<line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="220" y1="35" x2="250" y2="65" id="svg_3"/>
</g>
<g>
<title>Collapse Dark</title>
<rect stroke="#505050" height="90" width="90" y="5" x="305" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none" id="svg_4"/>
<line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="350" y1="35" x2="380" y2="65" id="svg_5"/>
<line fill="none" stroke="#000000" stroke-width="12" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="320" y1="65" x2="350" y2="35" id="svg_6"/>
</g>
<g>
<title>Expand Green</title>
<rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="405" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
<line id="svg_2" y2="35" x2="480" y1="65" x1="450" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
<line id="svg_3" y2="65" x2="450" y1="35" x1="420" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
</g>
<g>
<title>Collapse Green</title>
<rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="505" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
<line id="svg_2" y2="65" x2="580" y1="35" x1="550" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
<line id="svg_3" y2="35" x2="550" y1="65" x1="520" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
</g>
<g>
<title>Search</title>
<circle id="svg_9" r="32" cy="140" cx="60" stroke-width="8" stroke="#000000" fill="none"/>
<line id="svg_11" y2="167.5" x2="32.5" y1="190" x1="10" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#000000" fill="none"/>
</g>
<g>
<title>Search 2</title>
<rect id="svg_10" stroke="#505050" height="90" width="90" y="105" x="105" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="10" fill="none"/>
<circle r="25" cy="142.5" cx="157.5" stroke-width="8" stroke="#000000" fill="none" id="svg_7"/>
<line y2="165" x2="135" y1="180" x1="120" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#000000" fill="none" id="svg_8"/>
</g>
</svg>

Il fonctionne très bien et regarde la façon dont je le veux.

Le problème est le CSS. Définir les cellules dans le spritesheet est un peu plus problématique que je voudrais qu'il soit. Voici la page que je suis à l'affichage de ces icônes:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<style>
* {padding: 0px; margin: 0px; outline: 1px solid rgba(0,0,0,0.1);}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
.svgSprite {
background-image: url('./svgicons/form_icons_sprite.svg');
background-repeat: no-repeat;
background-size: 600%;
}
.svgSprite.add {
background-position: 0px 0px;
width: 12px;
height: 12px;
}
.svgSprite.delete {
background-position: -16px 0px;
width: 16px;
height: 16px;
}
.svgSprite.expandDark {
background-position: -24px 0px;
width: 12px;
height: 12px;
}
.svgSprite.collapseDark {
background-position: -36px 0px;
width: 12px;
height: 12px;
}
.svgSprite.expandGreen {
background-position: -48px 0px;
width: 12px;
height: 12px;
}
.svgSprite.collapseGreen {
background-position: -60px 0px;
width: 12px;
height: 12px;
}
.svgSprite.search {
background-position: 0px -12px;
width: 12px;
height: 12px;
}
.svgSprite.search2 {
background-position: -16px -16px;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div class="svgSprite add"></div>
<div class="svgSprite delete"></div>
<div class="svgSprite expandDark"></div>
<div class="svgSprite collapseDark"></div>
<div class="svgSprite expandGreen"></div>
<div class="svgSprite collapseGreen"></div>
<div class="svgSprite search"></div>
<div class="svgSprite search2"></div>
</body>
</html>

En gros, je veux savoir si il ya un moyen plus facile de définir les cellules de la spritesheet et de simplifier le CSS que j'utilise pour dire à chaque div icône à afficher à partir de la spritesheet.

Je préférerais que cette solution soit strictement SVG et CSS; je ne suis pas intéressée à l'utilisation de bibliothèques JavaScript. Je suis visant à le ramener à un point où je peux définir simplement les cellules et ont l'icône particulière je vise automatiquement ajuster à la taille de son conteneur, tout en conservant ses proportions. Actuellement, afin de rendre l'icône de l'ajustement de son conteneur parent, sa largeur et la hauteur doivent être expressément définis et correspondent à la largeur et la hauteur du conteneur parent. Si je change la largeur et la hauteur du conteneur parent, j'ai besoin de changer le background-position tailles ainsi.

Puis, il y a le problème de la mise à l'échelle. Avec cette configuration, le SVG échelles à la bonne taille pour être tracée à l'écran, mais si je décide de zoom à l'aide de mon navigateur zoom, il pixelates. Ce n'est pas le SVG est censé fonctionner.

Je suppose que je pourrais juste mettre chaque icône dans son propre fichier, car cela semble fonctionner à merveille, mais j'aime juste à l'aide de sprites; non seulement il me permet de gagner plusieurs demandes de serveur, c'est juste cool.

Je suis conscient de SVG Icône Chargeur. C'est plutôt cool, mais c'est un plus fichier JavaScript que je préfère ne pas compter.

J'ai déjà lu le w3 SVG docs, le MDN SVG docs, et les threads suivants sur DONC:

SVG & Spritesheets

Fit <svg> à la taille de <object> container

L'utilisation du format SVG comme image d'arrière-plan

...mais même après tout ça, je n'ai pas réussi à trouver une solution.

EDIT: j'ai oublié de mentionner, ce doit travailler dans IE9. C'est un peu une question, j'en suis sûr, mais IE9 est le support SVG est décent, c'est pourquoi j'ai choisi le format SVG pour ce projet.

Question similaire ici: stackoverflow.com/questions/4043809/....
Merci pour le pointeur. Alors que ce thread n'est pas exactement la réponse à ma question, il fournit un peu plus de possibilités pour moi d'essayer. Je me demande pourquoi ce n'était pas quand j'ai cherché? SVG Piles semble cool solution (et est en fait quelque chose que j'ai essayé très brièvement, mais je n'ai pas réussi à le mettre en œuvre correctement). Si seulement IE soutenu. Holy crap, il semble fonctionner dans IE9. Je vais donner ce un bon, solide essayer. Je vous remercie. Malheureusement, pour une raison quelconque, il ne fonctionne pas sous Google Chrome, ce qui me rend triste.

InformationsquelleAutor Adrian | 2012-06-08

css svg

3

En gros, je veux savoir si il ya un moyen plus facile de définir les cellules de la spritesheet et de simplifier le CSS que j'utilise pour dire à chaque div icône à afficher à partir de la spritesheet.

~~Non, vous ne pouvez pas faire cela plus facile.~~

Essayer cet article

Puis, il y a le problème de la mise à l'échelle. Avec cette configuration, le SVG échelles à la bonne taille pour être tracée à l'écran, mais si je décide de zoom à l'aide de mon navigateur zoom, il pixelates. Ce n'est pas le SVG est censé fonctionner.

En Chrome 18 il semble assez fine - pas de pixelations à tous.

Dans mon test de la liste des navigateurs (FF3.6 Opera 9.2 IE6) je n'ai pas vu ce que j'ai vu dans Chrome

Et sur IE9, peut-être problème dans moteur
- Bien que cette réponse ne résout pas mon problème, il n'a préciser une ou deux choses, et j'ai réalisé que je devrais marquer cette question qu'a répondu. Le commentaire ci-dessus par @Erik était plus utile dans le long terme, en offrant une alternative viable, mais je ne peut pas marquer un commentaire comme une réponse.
- Si pas de réponses à votre question, vous pouvez poster propre et le marquer comme solution. Merci quand même
- Liées exemple ne fonctionne malheureusement pas dans google chrome.
- Je pense que quelque chose change dans chrome, firefox, je vois encore d'exemple.
- Toujours pas de travail dans le navigateur Chrome. Damn it!
InformationsquelleAutor b1_
7

Si vos icônes ont la même taille, vous pouvez effectuer les opérations suivantes:
1. Pack d'icônes en sprite horizontalement (utiliser svg-sprite si les icônes sont dans des fichiers séparés).
2. Ensemble background-size: auto 100%; pour votre cible sélecteur.
3. Définir votre cible éléments"width, height ou font-size pour l'échelle.
CSS:
```
.icon {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>');
background-repeat: no-repeat;
background-size: auto 100%;
display: inline-block;
}
.icon.small {
height: 1em;
width: 1em;
}
.icon.medium {
height: 2em;
width: 2em;
}
.icon.large {
height: 4em;
width: 4em;
}
.icon_1 {
background-position: 0 0;
}
.icon_2 {
background-position: 33.33% 0;
}
.icon_3 {
background-position: 66.67% 0;
}
.icon_4 {
background-position: 100% 0;
}
```
HTML:
```
<span class="icon icon_1 small"></span>
<span class="icon icon_1 medium"></span>
<span class="icon icon_2 large"></span>
```
- Cette approche fonctionne, mais pour une raison quelconque, les pourcentages ne sont pas de travail. Le SVG est mis en place pour 5%, 10%, etc. mais il ne s'affiche pas correctement à moins que j'utilise de 5,2%, à 10,4%, de 15,7%, etc. Pixels parfaitement fonctionner (20px, 40px, etc.). Pensées?
- Je pense que vous avez besoin pour définir preserveAspectRatio="none" pour racine SVG nœud. Si vous utilisez le format svg-sprite, utilisez cette option: { rootAttributes: { 'preserveAspectRatio': 'none' } }. Mais encore, vous devez évoluer vos icônes proportionnellement à la taille minimale, sinon votre icône de bords seront interpolées entre les pixels et floue.
- Essayez également shape-rendering="crispEdges".
InformationsquelleAutor Aliaksandr Shutau

Vous devez vous connecter pour publier un commentaire.