Avatar billede Emma Seniormester
14. december 2020 - 10:59

Skift farve på en SVG Fil

Hej
Jeg har lavet en SVG fil, som jeg ønsker at ændre farve på.
Jeg har lavet alt SVG'en og mangler så koden.
Jeg forestiller mig, at det skal laves med klik, men en mouseover løsning vil også kunne bruges,
Der skal muligvis være en send knap mere, men så laver jeg den.
Løsningen skal muligvis benytte JavaScript eller CSS, det er OK bare den virker.
Jeg er rimelig nybegynder og må derfor søge om hjælp til dette.

Koden herunder

<html>
<head>
<meta charset="utf-8">
</head>
  <body>
    <h2>Eksempel p책 SVG Farveskifter</h2>
    <svg height="700" width="1000">
    <rect x="20" y="20" width="750" height="400" style="fill:rgb(180,80,255);stroke-width:10;stroke:rgb(0,0,0)" />
    <rect x="20" y="20" width="750" height="10" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
      <rect x="20" y="420" width="750" height="40" style="fill:rgb(0,0,0);stroke-width:10;stroke:rgb(0,0,0)" />
      <rect x="270" y="20" width="1" height="400" style="fill:rgb(0,0,0);stroke-width:8;stroke:rgb(0,0,0)" />
      <rect x="520" y="20" width="1" height="400" style="fill:rgb(0,0,0);stroke-width:8;stroke:rgb(0,0,0)" />
      <rect x="275" y="100" width="240" height="5" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
      <rect x="275" y="180" width="240" height="5" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
      <rect x="275" y="260" width="240" height="5" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
      <rect x="20" y="500" width="60" height="40" style="fill:rgb(0,0,255);stroke-width:5;stroke:rgb(0,0,0)" />
      <rect x="120" y="500" width="60" height="40" style="fill:rgb(0,255,0);stroke-width:5;stroke:rgb(0,0,0)" /> 
      <rect x="220" y="500" width="60" height="40" style="fill:rgb(255,0,0);stroke-width:5;stroke:rgb(0,0,0)" />
      <rect x="450" y="500" width="60" height="40" style="fill:rgb(255,255,255);stroke-width:5;stroke:rgb(0,0,0)" />
      <rect x="580" y="500" width="60" height="40" style="fill:rgb(255,255,255);stroke-width:5;stroke:rgb(0,0,0)" />
      <rect x="710" y="500" width="60" height="40" style="fill:rgb(255,255,255);stroke-width:5;stroke:rgb(0,0,0)" />
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="20" y="580">Klik p책 en farve </text>
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="20" y="620">for farveskift</text>     
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="350" y="530">rgb:  r</text>
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="555" y="530">g</text>
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="685" y="530">b</text>
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="350" y="580">Skriv tal i rammerne</text>
      <text fill="#000000" font-size="30" font-family="Verdana"
            x="350" y="620">tal mellem 0 til 255</text>     
    </svg>
  </body>
</html>   

Mvh Emma
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester