概要

stroke-opacityは、SVG（スケーラブルベクターグラフィックス）の線の透明度を制御するためのCSSプロパティです。このプロパティを使用することで、SVG内の要素がどの程度透けて見えるかを指定できます。デザインにおいて透明度を調整することは、視覚的な深みを与えたり、重なり合う要素をより柔軟に表現したりする際に非常に役立ちます。 stroke-opacityを使用することで、ストローク（線）の不透明度を0（完全に透明）から1（完全に不透明）までの範囲で設定できます。

基本的な構文

selector {
    stroke-opacity: 値;
}
  • 値は0から1までの数値で、0は完全に透明、1は完全に不透明です。

例 - stroke-opacityの基本的な使用

まず、stroke-opacityを使ってSVGの線の透明度を調整する簡単な例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        svg {
            width: 200px;
            height: 200px;
        }
        .opaque {
            stroke: blue;
            stroke-width: 5;
            stroke-opacity: 1; /* 完全不透明 */
        }
        .semi-transparent {
            stroke: red;
            stroke-width: 5;
            stroke-opacity: 0.5; /* 半透明 */
        }
        .transparent {
            stroke: green;
            stroke-width: 5;
            stroke-opacity: 0; /* 完全に透明 */
        }
    </style>
    <title>stroke-opacityの例</title>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <!-- 完全不透明な線 -->
        <circle cx="30" cy="30" r="20" class="opaque"/>
        <!-- 半透明な線 -->
        <circle cx="70" cy="30" r="20" class="semi-transparent"/>
        <!-- 完全に透明な線 -->
        <circle cx="50" cy="70" r="20" class="transparent"/>
    </svg>
</body>
</html>

説明

このコードでは、3つの異なる透明度を持つ円のストロークを定義しています。

  • opaqueクラスではstroke-opacity: 1を指定し、完全に不透明な青い線が描画されます。
  • semi-transparentクラスではstroke-opacity: 0.5を指定し、半透明の赤い線が描画されます。
  • transparentクラスではstroke-opacity: 0で完全に透明な緑の線が描画されます。 このように、stroke-opacityプロパティを使うと、SVGのストロークがどの程度透明になるかを調整できます。

stroke-opacityと他のプロパティの組み合わせ

stroke-opacityは、他のstroke関連のプロパティと組み合わせることで、さらに複雑な表現を作成できます。たとえば、線の色（stroke）、線の幅（stroke-width）、線のパターン（stroke-dasharray）と一緒に使用することで、動的でビジュアルにインパクトのあるデザインを作成することができます。

例 - 複雑なストローク表現

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        svg {
            width: 200px;
            height: 200px;
        }
        .complex-stroke {
            stroke: purple;
            stroke-width: 6;
            stroke-opacity: 0.7;
            stroke-dasharray: 10 5; /* 点線のストローク */
        }
    </style>
    <title>複雑なstroke-opacityの例</title>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <!-- 複雑なストロークと透明度 -->
        <rect x="10" y="10" width="80" height="80" class="complex-stroke" fill="none"/>
    </svg>
</body>
</html>

説明

この例では、紫色のストロークに対して、stroke-opacity: 0.7で透明度を調整し、さらにstroke-dasharrayを使って点線模様を作成しています。これにより、線が70%の透明度を持つ点線として描画され、複雑な視覚効果が生まれます。

stroke-opacityとfill-opacityの違い

stroke-opacityはストローク（線）の透明度を制御しますが、塗りつぶし部分（フィル）の透明度を調整したい場合は、fill-opacityプロパティを使用します。stroke-opacityとfill-opacityを組み合わせることで、線と塗りの透明度を個別に設定し、視覚的なバリエーションを増やすことが可能です。

例 - stroke-opacityとfill-opacityを同時に使用

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        svg {
            width: 200px;
            height: 200px;
        }
        .custom-opacity {
            stroke: orange;
            stroke-width: 5;
            stroke-opacity: 0.8; /* ストロークの透明度 */
            fill: yellow;
            fill-opacity: 0.3; /* 塗りの透明度 */
        }
    </style>
    <title>stroke-opacityとfill-opacityの例</title>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="30" class="custom-opacity"/>
    </svg>
</body>
</html>

説明

この例では、stroke-opacityとfill-opacityを使って、ストロークと塗りそれぞれの透明度を別々に設定しています。線（ストローク）は80%の不透明度で表示され、塗り（フィル）は30%の不透明度で表示されます。このように、透明度を個別に調整することで、デザインの柔軟性が大幅に向上します。

応用例 - グラデーションやアニメーションとの組み合わせ

stroke-opacityは、グラデーションやアニメーションと組み合わせることで、さらに洗練された効果を生み出すことができます。たとえば、線の透明度を徐々に変化させるアニメーションを作成することで、動きのあるダイナミックなSVGデザインを作成することが可能です。

例 - stroke-opacityを使ったアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        svg {
            width: 200px;
            height: 200px;
        }
        .animate-opacity {
            stroke: teal;
            stroke-width: 5;
            animation: fade 2s infinite alternate;
        }
        @keyframes fade {
            0% {
                stroke-opacity: 1; /* 完全不透明 */
            }
            100% {
                stroke-opacity: 0; /* 完全に透明 */
            }
        }
    </style>
    <title>stroke-opacityのアニメーション例</title>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <!-- 透明度が変化するアニメーション -->
        <line x1="10" y1="10" x2="90" y2="90" class="animate-opacity"/>
    </svg>
</body>
</html>

説明

この例では、stroke-opacityをアニメーションさせることで、SVGの線が時間経過とともに徐々に透明になり、再び不透明になる効果を実現しています。アニメーションは2秒ごとにループし、alternateプロパティで透明度の変化を反転させています。

stroke-opacityを使う際の注意点

  1. 他の透明度プロパティとの混同に注意
    opacityプロパティは要素全体の透明度を制御しますが、stroke-opacityは線のみの透明度を制御します。線の透明度のみを変更したい場合はstroke-opacityを使い、要素全体の透明度を変更する場合はopacityを使います。
  2. デザインの視認性に配慮
    stroke-opacityを使って透明度を下げすぎると、線がほとんど見えなくなり、デザインの視認性が低下することがあります。適切な値を設定し、デザインのバランスを考慮することが重要です。

まとめ

CSSのstroke-opacityプロパティを使うと、SVGの線の透明度を柔軟に調整でき、デザインに深みと動きを加えることができます。透明度を使った視覚効果は、他のプロパティと組み合わせることで、より豊かな表現を可能にします。透明度を使って要素の階層や重なりを表現し、視覚的に魅力的なデザインを作りましょう。

参照:

`CSS` stroke-opacityプロパティの詳細 | MDN