49 lines
3.5 KiB
XML
49 lines
3.5 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="280" viewBox="0 0 720 280" role="img" aria-labelledby="diagram-title diagram-description">
|
|
<title id="diagram-title">OFFSET은 건너뛸 행까지 읽고 버리지만 keyset은 커서 이후만 읽는다</title>
|
|
<desc id="diagram-description">위쪽 OFFSET 막대에서 빗금 구간은 정렬 순서상 앞에 있어 만들어졌다가 버려지는 범위이고, 오른쪽 진한 구간이 실제로 반환되는 페이지다. 아래쪽 keyset 막대에서 빈 구간은 아예 읽지 않는 범위이고, 커서 표시 뒤부터 페이지만 읽는다. 페이지가 깊어질수록 위쪽 빗금 구간만 길어지고 아래쪽은 그대로다. 이 이점은 커서와 같은 순서의 정렬키 인덱스가 있을 때만 성립한다.</desc>
|
|
<defs>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" />
|
|
</marker>
|
|
<pattern id="hatch" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
|
|
<line x1="0" y1="0" x2="0" y2="7" stroke="#9ca3af" stroke-width="3" />
|
|
</pattern>
|
|
<style>
|
|
:root { color-scheme: light; }
|
|
text { font-family: Inter, Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: #111827; }
|
|
.canvas { fill: #ffffff; }
|
|
.group-box { fill: #ffffff; stroke: #9ca3af; stroke-width: 1.4; stroke-dasharray: 7 5; }
|
|
.group-label-bg { fill: #ffffff; }
|
|
.group-label { font-size: 13px; font-weight: 650; fill: #374151; }
|
|
.edge { fill: none; stroke: #374151; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; marker-end: url(#arrow); }
|
|
.edge.dashed { stroke-dasharray: 7 5; }
|
|
.edge.primary { stroke: #2563eb; stroke-width: 2.2; }
|
|
.edge.muted { stroke: #9ca3af; }
|
|
.node { fill: #ffffff; stroke: #4b5563; stroke-width: 1.7; }
|
|
.node.primary { stroke: #2563eb; stroke-width: 2.4; }
|
|
.node.muted { stroke: #9ca3af; fill: #f9fafb; }
|
|
.node.marked { stroke: #4b5563; stroke-width: 2.4; stroke-dasharray: 5 4; }
|
|
.label { font-size: 14px; font-weight: 650; text-anchor: middle; }
|
|
.fill-kept { fill: #2563eb; stroke: none; }
|
|
.fill-drop { fill: url(#hatch); stroke: #9ca3af; stroke-width: 1; }
|
|
.fill-none { fill: #ffffff; stroke: #d1d5db; stroke-width: 1; }
|
|
</style>
|
|
</defs>
|
|
<rect class="canvas" width="720" height="280" />
|
|
<rect class="group-box" x="30" y="46" width="660" height="84" rx="9" />
|
|
<rect class="group-label-bg" x="44" y="37" width="59.599999999999994" height="18" />
|
|
<text class="group-label" x="50" y="50">OFFSET</text>
|
|
<rect class="fill-drop" x="55" y="76" width="500" height="34" rx="3" />
|
|
<rect class="fill-kept" x="555" y="76" width="110" height="34" rx="3" />
|
|
<text class="group-label" x="305" y="98" text-anchor="middle">버려지는 범위</text>
|
|
<rect class="group-box" x="30" y="170" width="660" height="84" rx="9" />
|
|
<rect class="group-label-bg" x="44" y="161" width="59.599999999999994" height="18" />
|
|
<text class="group-label" x="50" y="174">keyset</text>
|
|
<rect class="fill-none" x="55" y="200" width="500" height="34" rx="3" />
|
|
<rect class="fill-kept" x="555" y="200" width="110" height="34" rx="3" />
|
|
<text class="group-label" x="305" y="222" text-anchor="middle">읽지 않는 범위</text>
|
|
<line x1="555" y1="188" x2="555" y2="246" stroke="#2563eb" stroke-width="2.4" />
|
|
<text class="group-label" x="555" y="182" text-anchor="middle" fill="#2563eb">커서</text>
|
|
</svg>
|