web-dev-qa-db-fra.com

Comment créer un arrière-plan SVG qui s'étire plutôt que des tuiles?

J'ai un arrière-plan SVG que je veux utiliser, et je ne sais pas comment l'étendre sur toute la page, encore moins être un arrière-plan. Quelqu'un pourrait-il aider?

(Les pages W3Schools, à la fois sur SVG et sur les arrière-plans, ne m'ont rien donné).

<object data="background.svg" type="image/svg+xml" width="100%" height="100%"> ne fonctionne pas exactement.

htmlcsssvg
29
Glycan

Je pense que vous demandez si vous pouvez faire déformer et étirer le SVG comme le ferait un PNG. Ce n'est malheureusement pas impossible à moins que vos codes SVG eux-mêmes soient configurés de cette façon (par exemple, si vos SVG sont générés par illustrator, ils ne le feront tout simplement pas).

La seule façon de le faire pour le moment est de coder manuellement le SVG. Par exemple, au lieu de tracer une ligne diagonale avec un angle défini, vous pouvez dire au SVG de connecter le coin supérieur gauche au coin inférieur droit. Si vous avez le SVG, je pourrais peut-être vous dire comment le coder à la main. (Si votre SVG est compliqué comme le tigre de Phrogz, ce ne sera probablement pas possible ...)

De plus, pour la plupart des navigateurs modernes, vous pouvez simplement ajouter l'attribut preserveAspectRatio="none" À la balise svg. Si vous avez des fichiers .svg, Vous devez ouvrir le fichier avec un texte sublime et ajouter le code à la balise svg (quelque chose comme <svg version="1.1"...(hundreds of lines of codes followed) et vous le ferez <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed) .

69
Aero Wang

Vous voulez le CSS3 background-size propriété:

div {
  height:200px;
  background:url(my.svg);
  background-size: 100% auto; /* Fill width, retain proportions */
}

Démo: http://jsfiddle.net/JknDr/1/

Si vous souhaitez qu'il évolue de manière non proportionnelle pour remplir le conteneur (de sorte que l'arrière-plan s'étire et se ferme), utilisez background-size: 100% 100%.

10
Phrogz

Je viens de comprendre. Sur ton <svg> balise que vous devez:

  • supprimez les propriétés width et height ex: width="375" height="137"
  • ajouter cette propriété preserveAspectRatio="none"
  • ajoutez la propriété viewbox (contenant la largeur et la hauteur d'origine que vous venez de supprimer viewBox="0 0 375 137"

Dans votre fichier css sur l'élément qui contient votre arrière-plan svg:

  • ajoutez la propriété: background-size: 100% 100%;

Le problème clé pour moi était que mon fichier svg ne contenait pas la propriété viewbox.

2
kevinius