Je souhaite afficher une forme svg sur une page html où certains points doivent avoir une position fixe.
Dans les images ci-dessous, les cercles rouges représentent des points qui doivent conserver leur position exacte. Au-delà des points verts, à gauche et à droite, se trouvent les points non fixes et peuvent être mis à l'échelle. Comment cela pourrait-il être réalisé?
J'ai essayé différentes formes de mise à l'échelle, ainsi que des expériences avec les attributs viewbox et preserveAspectRatio, mais aucun n'a eu l'effet souhaité.
voici la définition svg. Je ne suis pas sûr de l'ordre des points, mais le coin supérieur gauche est 13, -12 . J'ai essayé de les changer en pourcentages, mais en le faisant dans mon éditeur svg, inkscape, supprime le point et plusieurs autres autour de lui.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"> <path d="m 32.043776,21.922259 c -4.3888,32.42227 33.58333,44.38479 62.94249,61.98573 64.330284,22.939391 72.648644,69.263531 22.383804,131.433121 -25.509995,25.04202 -103.692494,7.65258 -127.798134,-15.30517 -20.8697,-57.14796 -21.34432,-171.108891 -20.66205,-174.861331 8.03521,-44.19367 13,-12 47.82864,-18.5575098 8.45282,0 15.30525,6.8523498 15.30525,15.3051598 z" fill="#f9fdfd"/> </svg>
3 Réponses :
Je ne suis pas sûr de vous comprendre mais, à mon avis, dans ce cas, j'animerais l'attribut viewBox et la largeur.
<p><input id="itr" type="range" min="100" max="250" value="250" /></p> <svg id="test" width="500" height="200" viewBox="-250 50 500 200"> <path fill="lightgrey" d="M-250,0C-250,0,-130,35,-91,51C-52,67,-23,78,-1,81C21,84,29,78,34,81C39,84,42,86,43,105C44,124,51,133,43,136C35,139,-30,103,-38,165C-46,227,75,207,127,208C179,209,239,212,257,236C257,266,257,296,257,326C88,326,-81,326,-250,326C-250,217.333,-250,108.667,-250,0z"/> </svg>
svg {
border: 1px solid;
display: block;
margin: 1em auto;
}
p {
text-align: center;
}
itr.addEventListener("input",()=>{
let val = parseInt(itr.value);
let vb = `${-val} 50 ${2*val} 200`
let w = 2*val;
test.setAttributeNS(null,"viewBox",vb)
test.setAttributeNS(null,"width",w)
})
C'est essentiellement la solution «masque» à laquelle je faisais référence dans les commentaires. Bel exemple!
Vous ne pourrez pas très bien faire cela si les zones "fixes" sont au centre. IE si les points de gauche ET de droite doivent être mis à l'échelle. Le problème est que les points fixes sont référencés en haut à gauche.
Correction: les SVG prennent en charge les mesures en pourcentage et en unités fixes (px). Ouvrez simplement le code SVG et ajoutez / modifiez des unités si nécessaire.
Astuce: refaites l'image avec une zone de visualisation de 100 px x 100 px afin que vous ayez des valeurs valides à convertir en pourcentages.
Il semble que vous cherchez à découper le svg avec preserveAspectRatio.
<svg id="test" viewBox="-250 0 500 300" preserveAspectRatio="xMidYMin slice">
<path fill="lightgrey" d="M-250,0C-250,0,-130,35,-91,51C-52,67,-23,78,-1,81C21,84,29,78,34,81C39,84,42,86,43,105C44,124,51,133,43,136C35,139,-30,103,-38,165C-46,227,75,207,127,208C179,209,239,212,257,236C257,266,257,296,257,326C88,326,-81,326,-250,326C-250,217.333,-250,108.667,-250,0z"/>
</svg>
<div class="content">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>
body {
margin: 0;
}
#test {
width: 100%;
height: 100%;
position: absolute;
}
.content {
position: relative;
padding: 30px;
}
Pas exactement. Dans votre exemple, lorsque vous mettez à l'échelle verticalement, vous pouvez voir que les points au centre ne sont pas fixes et que l'espace entre eux et le côté droit de la fenêtre devient de plus en plus petit
doit-il être mis à l'échelle ou pouvez-vous le masquer? Je crois comprendre que vous voulez que la zone centrale reste pendant que le reste est mis à l'échelle (coupé). Est-ce exact?
Je pense qu'il doit évoluer. Le design doit ressembler à l'image du haut sur mobile, mais à mesure qu'il s'adapte aux tailles de tablette et de bureau, il devrait commencer à ressembler davantage à l'image du bas.
Avez-vous l'image réelle que vous pouvez partager? J'ai quelques idées mais elles dépendent toutes de ce qui est réellement mis à l'échelle
J'ai essayé votre solution ci-dessous, en vain. J'ai édité mon message pour inclure le svg.