3 circles

​​💾 https://replit.com/@pegasusroe/svg-3-circles

circles.svg

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <title>3 circles</title>
    <circle cx="100" cy="100" r="25" fill="red"></circle>
    <circle cx="200" cy="100" r="25" fill="green"></circle>
    <circle cx="300" cy="100" r="25" fill="blue"></circle>
</svg>

• 使用獨立的 .svg 檔時，好像一定要註明： xmlns="http://www.w3.org/2000/svg" 否則 GitBook 似乎無法順利載入 SVG 圖檔。

• CSS 的設定似乎對獨立的 SVG 檔無用 ❗

index.html

<!-- inline SVG -->
<svg id="c1" viewBox="0 0 400 200">
        <circle cx="100" cy="100" r="25" class="first"></circle>
        <circle cx="200" cy="100" r="25" class="second"></circle>
        <circle cx="300" cy="100" r="25" class="third"></circle>
</svg>

<!-- inline SVG -->
<svg viewBox="0 0 400 200" id="c2">
        <circle cx="112" cy="112" r="25" class="overlap"></circle>
        <circle cx="100" cy="100" r="25" class="first"></circle>
        <circle cx="200" cy="100" r="25" class="second"></circle>
        <circle cx="300" cy="100" r="25" class="third"></circle>
</svg>

<!-- SVG img -->
<img src="flex-direction.svg" alt="flex-direction">
<img src="circles.svg" alt="circles">

css

body {
    background-color: gray;
}

/* styles for SVG */
svg {
    border: 1px solid black;
}

circle { 
    fill: rgba(255,0,0,1); 
    stroke: black;
}

#c2 {
    width: 50vw;
    background-color: #ccc;
}

.first { 
    opacity: .75; 
}

.overlap {
    fill: rgba(0, 0, 200, .75);
}

.second { 
    stroke-width: 3px; 
}

.third { 
    fill: rgba(0,200,0,.75);
}