概要

stroke-miterlimitは、SVGグラフィックスでパスの角が鋭くなりすぎるのを防ぐために使用されるCSSプロパティです。このプロパティは、線が交わる角（マイター結合）の形状を制御し、角が尖りすぎる場合に自動的に角を切り落とし、滑らかで見やすいデザインを実現します。主に、直線や鋭い角を持つ図形を描画する際に役立ちます。

基本的な構文

selector {
    stroke-miterlimit: 値;
}
  • 値には1以上の数値を指定し、角がどれだけ鋭くなるかを制御します。

stroke-miterlimitの動作原理

stroke-miterlimitは、SVGパスで線が交差するポイント（角）の長さが、線の太さに対してどの程度尖ってよいかを制御します。角が鋭利になると、マイター結合によって線の外側に突き出す部分が生じますが、その突き出し具合が一定の値を超えた場合、角を平らにすることで見た目を調整します。 次の図を例に考えましょう。

  • 角の形状が鋭利になると、パスの交わる部分が尖ります。
  • stroke-miterlimitの値が大きいと、この尖り具合が強調され、小さいと角が自動的に平ら（ベベル）になります。

例 - stroke-miterlimitの使用

<!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;
        }
        .miterlimit-4 {
            stroke: black;
            stroke-width: 5;
            stroke-miterlimit: 4; /* デフォルト値 */
        }
        .miterlimit-1 {
            stroke: black;
            stroke-width: 5;
            stroke-miterlimit: 1; /* 低い値 */
        }
        .miterlimit-10 {
            stroke: black;
            stroke-width: 5;
            stroke-miterlimit: 10; /* 高い値 */
        }
    </style>
    <title>stroke-miterlimitの例</title>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <!-- デフォルトのマイターリミット（4） -->
        <path d="M 10,10 L 50,50 L 90,10" class="miterlimit-4" fill="none"/>
        <!-- マイターリミットを低く設定（1） -->
        <path d="M 10,60 L 50,100 L 90,60" class="miterlimit-1" fill="none"/>
        <!-- マイターリミットを高く設定（10） -->
        <path d="M 10,110 L 50,150 L 90,110" class="miterlimit-10" fill="none"/>
    </svg>
</body>
</html>

説明

このコードでは、3つの異なるstroke-miterlimitの値を使って、SVGパスの角の形状を比較しています。

  • miterlimit-4はデフォルト値（4）で、適度に鋭利な角が描画されます。
  • miterlimit-1では角が丸みを帯び（ベベル形状）、突き出し部分が少なくなっています。
  • miterlimit-10では、鋭利な角が強調されて、角が非常に尖って描かれます。

マイター比とstroke-miterlimit

マイター比とは、マイター結合で角がどれだけ突き出しているかを線の太さに対して表した比率です。stroke-miterlimitは、この比率が設定値を超えた場合に角を切り落とす仕組みになっています。

  • マイター比 = マイターの長さ ÷ ストローク幅 stroke-miterlimitが4の場合、角がストローク幅の4倍以上に突き出ると、自動的に角がベベル（平らな角）に変わります。例えば、非常に鋭い角度を持つ図形では、マイター比が高くなりすぎることがありますが、stroke-miterlimitで適切に調整することで、視覚的にバランスの取れたデザインが可能になります。

実用例 - ロゴや図形での活用

stroke-miterlimitは、ロゴデザインやアイコンなど、鋭利な角を含むデザインで頻繁に使用されます。適切な値を設定することで、視覚的なバランスを保ちながら、美しい形状を実現できます。

ロゴデザインにおける例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        svg {
            width: 150px;
            height: 150px;
        }
        .logo {
            stroke: #3498db;
            stroke-width: 8;
            fill: none;
            stroke-miterlimit: 3; /* ロゴの角を調整 */
        }
    </style>
    <title>ロゴでのstroke-miterlimitの例</title>
</head>
<body>
    <svg viewBox="0 0 100 100">
        <!-- ロゴのパス -->
        <path d="M 10,10 L 50,50 L 90,10 L 50,90 Z" class="logo"/>
    </svg>
</body>
</html>

説明

この例では、ロゴの角が強調されすぎないように、stroke-miterlimitを3に設定しています。これにより、ロゴのシャープさを保ちながらも、角が尖りすぎて不自然にならないように調整しています。

stroke-miterlimitを使う際の注意点

  1. 鋭い角に注意
    角が極端に鋭くなる場合、stroke-miterlimitの値が高すぎると視覚的に違和感が生じることがあります。適切な値に調整して、デザイン全体が滑らかに見えるようにしましょう。
  2. ブラウザのサポート
    stroke-miterlimitは、主にSVGグラフィックスで使用されるプロパティであり、主要なモダンブラウザ（Chrome、Firefox、Edge、Safari）でサポートされています。従来のブラウザを考慮する必要がある場合は、ベクター画像のレンダリング方法に注意が必要です。

まとめ

CSSのstroke-miterlimitプロパティを使うことで、SVGの角の形状を効果的に制御でき、デザインの一貫性を保ちながら複雑なパスを描画することが可能です。特に、鋭い角を持つ図形やロゴデザインで役立ちます。適切な値を設定することで、視覚的なバランスを維持しつつ、洗練されたデザインを実現しましょう。

参照:

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