18041 sujets

Questions générales et questions de débutants

[Résolu] PNG (ou img SVG) au dessus de 3 images SVG + background

Bonjour à tous
(Désolé, je n'ai pas trouvé de page de présentation, en tout cas votre site est super chouette !
Il m'a déjà bien aidé par le passé)
Mais là j'ai grandement besoin de vous, pour préserver les cheveux qu'il me reste.
Explication :
je souhaite afficher sur ma page, la photo d'une moto de vue profile,
Inclure 3 color pickers (jscolor) afin que le visiteur puisse changer à sa guise
chacune des 3 couleurs de la moto (haut du reservoir/ bas du reservoir/ plus un filet entre les deux.
J'ai donc créé 3 tracés vectoriel en svg (les 3 couleurs)
dans ma balise "<svg" pour pourvoir utiliser le "mix-blend-mode: multiply;" pour que les couleurs se superpose au background
Le Problème :
je veux ajouter par dessus la moto + les 3 calques couleurs ,
un nouveau calque PNG ou SVG : c'est des REFLETS BLANC !!
mais je n'arrive pas le faire correspondre avec le reste, il ne veux pas suivre quand on agrandi ou réduit la fenêtre du navigateur.
Une idée ?
Merci d'avance

Mon html :
<body>
<div id="monreflet">
<img id="reflet" src="MOTOF6CFLOOD2.png"   alt="">
</div>
<div id="container">
<svg id="product-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1280">
<path id="product-shape" d= mon code svg de la couleur 1 "/>
<path id="product-shape2" d= mon code svg de la couleur 2 "/>
<path id="product-shape3" d= mon code svg de la couleur 3 "/>
</svg> 
<image id="background-image" src="MOTOFONDF6C.svg" alt="">
</div>


mon CSS
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
*,
*:before,
*:after {
box-sizing: border-box;
}

#container {
height: 100%;
width: 100%;
}

#product-svg {
z-index: 2;
background-size: 100%;
background-repeat: no-repeat;
background-position: 100%;
mix-blend-mode: Multiply;
}

#reflet {
position: absolute;
height: auto;
width: 100%;
z-index: 3;
opacity:1;
mix-blend-mode: disolve;
}
Coucou, j'ai du mal à repérer où est-ce que tu as attribué la couleurs de tes path.
Coucou, j'ai du mal à repérer où est-ce que tu as attribué la couleurs de tes path.
En fait, à la suite dans le css (je voulais pas trop surcharger)
les voici : (cela correspond au 3 couleurs affichées à l'ouverture,
quand personne n'a encore utilisé les "color picker"

#product-shape {
fill: #12167A;
  }
#product-shape2 {
fill: #FCFAD7;
}
#product-shape3 {
 fill: #FC8905;
  }
Modérateur
Bonjour,

Ce que tu montres de ton code me semble marcher en l'état (j'ai fait un test avec ton code tel quel, avec une image png pour le reflet et une image svg en dessous, l'image ayant l'id reflet remplit toute la largeur de l'écran, tout comme l'image qui est en dessous).

Ton problème est ailleurs.

Est-ce que l'image ayant l'id background-image doit remplir toute la largeur de l'écran ? On a rien dans le css que tu nous montres concernant cette image.

Amicalement,
En fait il semblerait qu'il soit compliqué de mélanger images (PNG, JPEG...)
dans la même balise <svg .... avec des path qui appel des fichiers vectorisé, enfin peut-être
mais après cela pose un problème de blend mode (un seul choix possible)
Du coup, je vais changer mon fusil d'épaule,
Ma solution : Vectoriser mon calque "Reflet", le mettre en blanc, lui appliquer un filtre de flou et le placer dans la même balise que mes 3 calques couleur + background (avec des <path)
Ainsi , il sera possible d'avoir un blend mode différent sur chaque claques :
"screen" sur le reflet , "multiply" pour les 3 couleurs.

Merci de votre aide

Parsimonshi, pour répondre à ta question, la taille d'affichage final n'avait pas trop d'importance,
le plus grand possible, mais je voulais juste que tout les calques se déforme ensemble : mais mon calque "refflet png" était en "pixel" et tout le reste en .svg "vectorisé"
C'est le mélange de tout cela, dans la même balise <svg, qui semble compliqué.
EN tout cas merci beaucoup pour votre aide
Cordialement
Sujet clos
Aller à