SVG
色

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
サーチ…


名前付きの色 - 塗りと線の属性にあらかじめ定義された名前を使用する

認識されたカラーキーワード名のリストは、SVGのW3C勧告に記載されています 。 

<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>

16進表記を使用したRGB色

<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>

上の16進数形式を使用した場合と同じです。 

<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カラー - 整数値またはパーセンテージ

<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>

機能表記では、RGBA値もサポートされています。 

<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>

currentColorキーワード

currentColorは、インラインSVGで最も便利です。これにより、親CSSの色を継承してSVGで使用される色をどこでも使用できます。

この例では、最初の円はテキストの色を塗りつぶしの色として使用し、2番目の円はストロークの色として使用します。 

<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
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow