CSS stroke-opacity Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #fafafa;
    color: #222;
}

.wrap {
    max-width: 560px;
}

h2 {
    margin: 0 0 12px 0;
    font-size: 18px;
}

svg {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.box {
    stroke-width: 8;
    transition: stroke-opacity 200ms ease;
}

.box-full {
    stroke: navy;
    stroke-opacity: 1;
}

.box-half {
    stroke: olive;
    stroke-opacity: 0.5;
}

.box-low {
    stroke: maroon;
    stroke-opacity: 0.2;
}

.label {
    font-size: 12px;
    fill: #333;
}

.box:hover {
    stroke-opacity: 0.05;
}</style></head><body><div class='wrap'>
    <h2>CSS stroke-opacity examples</h2>

    <svg width='540' height='160' viewBox='0 0 540 160' xmlns='http://www.w3.org/2000/svg'>
        <rect class='box box-full' x='10' y='30' width='150' height='100' fill='lightblue' />
        <text class='label' x='10' y='25'>stroke-opacity: 1</text>

        <rect class='box box-half' x='195' y='30' width='150' height='100' fill='lightgreen' />
        <text class='label' x='195' y='25'>stroke-opacity: 0.5</text>

        <rect class='box box-low' x='380' y='30' width='150' height='100' fill='lightcoral' />
        <text class='label' x='380' y='25'>stroke-opacity: 0.2</text>
    </svg>
</div></body></html>