Fixe SVG hauteur & variable (100%) de la largeur de
Je suis en train de mettre un svg objet sur ma page html et je veux qu'il ait 100% de largeur et une hauteur fixe.
Dans mon violon, vous pouvez voir que la hauteur de gris foncé objet de modifications en fonction de la fenêtre de proportions. (Ce n'est pas ce que je veux)
http://jsfiddle.net/Lq207ery/6/
HTML
<body>
<!-- HEADER -->
<header>
<div class="logo"></div>
<div class="triangle">
<svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
<g>
<!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
<polyline fill="#CC0000" points="0,0 0,200 300,0 "></polyline>
</g>
</svg>
</div>
<div class="nav">
<svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
<polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
</svg>
</div>
</header>
<!-- CONTENT -->
CSS
body {
margin: 0;
}
header svg {
display: block;
margin: 0;
}
header .triangle {
z-index: 200;
}
header .logo {
margin-top: -90px;
}
header .nav {
position: absolute;
top:0;
left:0;
width:100%;
z-index:-1;
}
OriginalL'auteur user3703764 | 2015-02-04
Vous devez vous connecter pour publier un commentaire.
viewBox
à la culture à la hauteur de votre contenu.preserveAspectRatio
valeur pour avoir la bonne valeur sensible à la casse, par exemplexMinYMin
(pasxMinYmin
).Démo: http://jsfiddle.net/Lq207ery/8/
Si vous voulez que votre gris foncé triangle pour étirer (pas en conservant ses proportions) alors au lieu d'utiliser
preserveAspectRatio="none"
.Démo: http://jsfiddle.net/Lq207ery/9/
Vous êtes les bienvenus! Dans l'avenir, s'il vous plaît essayer de se souvenir non seulement de montrer ce qui est mal (que vous n'avez parfaitement), mais également à décrire clairement ce que vous voulez/attendre à la place. Il n'était pas clair pour moi exactement ce que tu voulais l'aspect final.
OriginalL'auteur Phrogz
Vous explication est un peu courte, mais vous pouvez le faire comme ceci :
Code HTML :
Code CSS :
SVG avant l'encodage de l'url :
Démo : http://jsfiddle.net/sparkup/21uaffpy/
Ou ligne ce peut-être : http://jsfiddle.net/sparkup/21uaffpy/18/
Vous venez de urlencode
<svg>...</svg>
avecdata:image/svg+xml;utf8,
en face d'elle.OriginalL'auteur Sparkup