CSS 마커 속성

정의와 사용법

마커 속성은 모든 꼭짓점에(즉, 첫 번째, 중간, 마지막 꼭짓점) 그려질 마커를 지정합니다。

마커의 형태는 SVG <marker> 요소로 정의되며, url() 값을 통해 참조됩니다。

CSS 마커 속성의 값은 SVG에서 마커 속성의 모든 값을 대체합니다。

예제

예제 1

하나의 마커(화살표)를 지정하여, 이 마커는 요소 경로의 첫 번째, 중간, 마지막 꼭짓점에 그려집니다:

#test {
  marker: url(#arrow);
}

직접 테스트해 보세요

예제 2

하나의 마커(원)를 지정하여, 이 마커는 요소 경로의 첫 번째, 중간, 마지막 꼭짓점에 그려집니다:

#test {
  marker: url(#circle);
}

직접 테스트해 보세요

CSS 문법

marker: none|url|initial|inherit;

속성 값

설명
none 기본 값。경로에 마커를 그리지 않습니다。
url SVG <marker> 요소로 정의된 마커의 URL을 참조합니다。
initial 이 속성을 기본 값으로 설정합니다。참조 initial
inherit 부모 요소에서 이 속성을 继承 합니다。참조 inherit

브라우저 지원

표格에 표시된 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다。

크롬 에지 파이어폭스 사파리 오페라
80 80 72 13.1 67

관련 페이지

교육:SVG 마크업

참조:CSS 마커 스타트 속성

참조:CSS 마커 미드 속성

참조:CSS 마커 엔드 속성