用途
新着
履歴
分類

SVG 円柱のサンプル

SVG 円柱のサンプル
SVGとdivを組み合わせて円柱を作るサンプルです。

SVGのellipseを使って楕円を作り、円柱を表現してみます。

CSSの角丸(border-radius)で頑張って作ることもできますが、個人的にはこの方が簡単に円柱を作れました。

高さをCSSで調整してるので、棒グラフのデザインとしても使えます。

まずノーマルな円柱

<div class="demo_rect">
    <svg width="100" height="50" class="demo_circle1">
        <ellipse cx="50" cy="25" rx="50" ry="25" fill="#2222DD" />
    </svg>
    <svg width="100" height="50" class="demo_circle2">
        <ellipse cx="50" cy="25" rx="50" ry="25" fill="#111188" />
    </svg>
</div>

作りは簡単で、四角いdivの中に楕円が二つ上下にはみ出しています。

次は逆さまの円柱

<div class="demo_rect">
    <svg width="100" height="50" class="demo_circle1">
        <ellipse cx="50" cy="25" rx="50" ry="25" fill="#111188"/>
    </svg>
    <svg width="100" height="50" class="demo_circle2">
        <ellipse cx="50" cy="25" rx="50" ry="25" fill="#2222DD"/>
    </svg>
</div>

実は中の楕円の色が、下地のdivと同じ色になっている。

次は少しアレンジしたパターン

<div class="demo_rect2">
    <svg width="100" height="50" class="demo_circle1">
        <ellipse cx="50" cy="25" rx="47.5" ry="20" fill="#22DD22" stroke="#22AA22"  stroke-width="5"/>
    </svg>
    <svg width="100" height="50" class="demo_circle2">
        <ellipse cx="50" cy="25" rx="50" ry="25" fill="#118811"/>
    </svg>
</div>

上側にある楕円にフチをつけてその分小さくしています。

CSSはこちら


.demo_rect{
    width: 100px;
    height:100px;
    margin:50px auto 50px;
    background-color:#111188;
    position: relative;
}
.demo_circle1{
    top:-25px;
    position: relative;
    box-sizing: border-box;
}
.demo_circle2{
    bottom:-25px;
    left: 0;
    position: absolute;
}

.demo_rect2{
    width: 100px;
    height:100px;
    margin:50px auto 50px;
    background-color:#118811;
    position: relative;
}
公開 2020-02-17 22:20:09
更新 2020-02-17 22:25:11
このページの二次元コード
SVG 円柱のサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top