diff --git a/B06_Section/B06_Section_UI_Cross_Design_Surface.ts b/B06_Section/B06_Section_UI_Cross_Design_Surface.ts index dca4ed947..4355fab5c 100644 --- a/B06_Section/B06_Section_UI_Cross_Design_Surface.ts +++ b/B06_Section/B06_Section_UI_Cross_Design_Surface.ts @@ -92,18 +92,17 @@ export function appendPavementOverlay( const polygon = document.createElementNS(SVG_NS, "polygon"); polygon.setAttribute("points", points); polygon.setAttribute("class", "b06-chart__pavement"); - svg.append(polygon); const spec = entry?.spec; const mark = spec ? PAVE_MARKS[spec] : undefined; - if (!spec || !mark) continue; - const id = `b06-pave-hatch-${(paveSeq += 1)}`; - const defs = document.createElementNS(SVG_NS, "defs"); - defs.innerHTML = `${mark.marks}`; - const hatch = document.createElementNS(SVG_NS, "polygon"); - hatch.setAttribute("points", points); - hatch.setAttribute("class", "b06-chart__pavement-hatch"); - hatch.setAttribute("fill", `url(#${id})`); - hatch.dataset.paveSpec = spec; - svg.append(defs, hatch); + if (spec && mark) { + // 무늬는 바탕 채움째 한 패턴 — 다각형 한 장(B07 도면 수확이 겹선을 안 담음) + const id = `b06-pave-hatch-${(paveSeq += 1)}`; + const defs = document.createElementNS(SVG_NS, "defs"); + defs.innerHTML = `${mark.marks}`; + svg.append(defs); + polygon.style.fill = `url(#${id})`; + polygon.dataset.paveSpec = spec; + } + svg.append(polygon); } } diff --git a/B06_Section/B06_Section_UI_Style_Cross_Areas.css b/B06_Section/B06_Section_UI_Style_Cross_Areas.css index 390b8c475..ff1b95e00 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Areas.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Areas.css @@ -185,9 +185,9 @@ stroke-width: 1; } -/* 노면공 포장사양 무늬(88): 채움 박스 위에 무늬만 한 겹 — 콘크리트 빗금 · 아스콘 점 · 쇄석 돌 */ -.b06-chart__pavement-hatch { - stroke: none; +/* 노면공 포장사양 무늬(88): 포장 박스 채움 = 바탕 + 무늬 — 콘크리트 빗금 · 아스콘 점 · 쇄석 돌 */ +.b06-chart__pave-bg { + fill: color-mix(in srgb, var(--color-text-secondary) 30%, transparent); } .b06-chart__pave-mark {