SVG
kleuren

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Zoeken…


Benoemde kleuren - gebruik vooraf gedefinieerde namen voor opvul- en lijnkenmerken

Een lijst met herkende trefwoordnamen voor kleuren is te vinden in de W3C-aanbeveling voor SVG . 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="red" stroke="green" />
  <rect x="200" y="200" width="50" height="50" fill="yellow" stroke="blue" />
</svg>

RGB-kleuren met behulp van hexadecimale notatie

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="#ff0000" stroke="#00ff00" />
  <rect x="200" y="200" width="50" height="50" fill="#ffff00" stroke="#00ffff" />
</svg>

Hetzelfde als hierboven met steno-hexadecimale vorm : 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="#f00" stroke="#0f0" />
  <rect x="200" y="200" width="50" height="50" fill="#ff0" stroke="#0ff" />
</svg>

RGB-kleuren met functionele notatie - gehele waarden of percentages

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle r="30" cx="100" cy="100" fill="rgb(255, 0, 0)" stroke="rgb(0, 255, 0)" />
  <rect x="200" y="200" width="50" height="50" fill="rgb(100%, 100%, 0%)" stroke="rgb(0%, 100%, 100%)" />
</svg>

in functionele notatie worden ook RGBA-waarden ondersteund. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle r="30" cx="100" cy="100" fill="rgba(255, 0, 0, 0.5)" stroke="rgba(0, 255, 0,5 0.5)" />
    <rect x="200" y="200" width="50" height="50" fill="rgba(100%, 100%, 0%, 0.5)" stroke="rgba(0, 100%, 100%, 0.5)" />
</svg>

Het currentColor-trefwoord

currentColor is het meest bruikbaar in inline SVG's. Hiermee kun je de css-kleur van de ouders erven en overal gebruiken waar kleuren in SVG worden gebruikt.

In dit voorbeeld gebruikt de eerste cirkel de tekstkleur als vulkleur en de tweede cirkel gebruikt deze als lijnkleur. 

<html>
    <head>
        div{color:green}
    </head>
    <body>
        <div>
            some Text
            <svg width="2em" height="1em" viewBox="0 0 200 100">
                <circle cx="50" cy="50" r="45" fill="currentColor"/>
                <circle cx="150" cy="50" r="45" fill="none" stroke-width=5 stroke="currentColor"/>
            </svg>
        </div>
    </body>
</html>


Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow