Dev Faq
11
votes

Redimensionner l'image SVG comme arrière-plan dans le navigateur de chrome

J'utilise l'image SVG comme arrière-plan et j'étonce une image SVG à travers la taille de fond. Je veux que ce soit Strech seulement la largeur sage. Cela fonctionne parfaitement parfaitement dans Firefox, IE9 + mais chrome. S'il vous plaît suggérer comment je peux y parvenir. XXX

Voir le code JSBIN

1 commentaires

Dupliqué possible de Taille de l'arrière-plan: 100% 100%; ne fonctionne pas correctement en chrome

5 Réponses :

0
votes

Je pense que Techniquement Chrome est correct sur celui-ci, vous devez ajuster vos valeurs de taille de fond à ce que vous voulez réellement. Les garder à 100% est forçant le rapport de format à rester constant.

2 commentaires

Serait utile si votre réponse contenait le code pour en faire la manière dont l'OP veut.

J'ai spécifié 42px Hight et Hauteur de taille d'arrière-plan également 100% alors pourquoi la hauteur s'étend. Oh, l'autre main Firefox fonctionne ce que je souhaite.

20
votes

Peut-être ajouter PRESERVESPLACRATIO = "Aucun" pour ouvrir la balise dans le fichier SVG pourrait aider? 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974"
     xml:space="preserve" preserveAspectRatio="none">
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/>
</svg>

1 commentaires

Ilya Streltsyn je t'aime ... Sérieusement, vous venez probablement de sauver mon vie, merci beaucoup !!!

1
votes

Ne pas utiliser de taille d'arrière-plan. Ce que vous devez faire est d'avoir les valeurs suivantes pour la largeur, la hauteur et la préservationPlustratio dans votre fichier SVG. 

<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." />

0 commentaires
1
votes

C'est un bug chrome. Régression, en fait.

http://code.google.com/p/chromium/ Problèmes / détail? ID = 113414

1 commentaires

En mai, cependant, le réglage préservationpectratio = "aucun" a aidé.

6
votes

Je n'ai pas assez de réputation pour upvote ou commenter, alors ne répondra que de nouveau. J'ai résolu un cas similaire en ajoutant simplement la préservationPlustratio = "Aucun". 

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="591.42859"
height="250.24918"
id="svg2"
version="1.1"
preserveAspectRatio="none"
inkscape:version="0.48.2 r9819"
sodipodi:docname="background.svg">

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor