SVG 강의

SVG 요소

SVG <marker> 표시

SVG 태그는 라인이나 경로의 시작, 중간, 종료에 사용됩니다. 예를 들어, 원이나 사각형 태그 경로의 시작점을 사용하거나, 화살표 태그 경로의 종점을 사용할 수 있습니다.marker 요소는 특정 <path> 요소, <line> 요소, <polyline> 요소 또는 <polygon> 요소에 그려지는 화살표나 다각형 태그 그래픽을 정의합니다

Marker 온라인 예제

표시의 모습을 설명하는 간단한 시각적 예제는 다음과 같습니다:

표시는 <marker> 요소를 사용하여 생성됩니다.<marker> 요소는 <defs> 요소 내에 임베디드되어야 합니다.<defs> 요소는 일반적으로 SVG 이미지에 재사용 가능한 정의 집합을 보관하는 데 사용됩니다.
위 그림 예제의 SVG 코드는 다음과 같습니다:

예제

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle　cx="5"　cy="5"　r="3"　style="stroke:　none;　fill:#000000;"></circle>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6"　orient="auto">
　　　　　　　　　　　　<path　d="M2,2　L2,11　L10,6　L2,2" style="fill: #000000;"></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path　d="M100,10　L150,10　L150,60" style="stroke: #"6666ff; stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　">",/path>
</svg>

테스트를 보세요 ‹/›

먼저, 주의해야 할 것은 <defs>에 두 개의 <marker> 요소가 포함되어 있다는 점입니다. 이 두 <marker> 요소는 상단 그림에 표시된 시작 및 종료 표시를 정의합니다.
또한, <path> 요소가 마크를 사용하는 방식에 주의해 주세요.-start와 marker-end CSS 속성은 두 개의 <mark> 요소를 style 속성 내에서 참조합니다. 이는 주어진 경로에 사용할 마크를 지정하는 방법입니다. 나중에 이 문제에 대해 다시 이야기할 것입니다.

마크 정의

마크를 정의할 수 있는 <marker> 요소를 사용할 수 있습니다. 이는 예제입니다:

<marker　id="markerCircle"　markerWidth="8" markerHeight="8" refX="5" refY="5">
　　　　<circle　cx="5"　cy="5"　r="3" style="stroke: none; fill:#000000;"/>
</marker>

이 예제는8(markerWidth=“8”)의 높이로 설정됩니다.8(markerHeight=“8를 가진 마크.

<mark> 요소의 id 속성은 <path> 요소에서 이 마크를 참조하는 데 사용됩니다.

refX와 refY 좌표는 마크 내의 포인트를 참조점으로 설정합니다. 참조点是使用标记定位在路径开始处的点。 이 예제에서 refX와 refY는 원의 중심으로 설정되어 있으며, 이는 원의 중심이 경로의 시작점에 배치된다는 의미입니다. refX와 refY를 설정하지 않으면, 기본적으로 0으로 설정되어 마크의 왼쪽 상단이 경로의 시작점에 위치하게 됩니다.

내부는 <circle> 요소입니다. circle 요소는5,5를 중심으로 (cx와 cy). 중심点是标记虚拟框中的中心。它不是实际放置在图像上的位置。使用markerWidth和markerHeight在<marker>元素中将虚拟框的大小设置为8.8.

자동 정향

이는 또 다른 <marker> 정의 예제입니다. 이 예제는 경로矢印으로 사용되는 삼각형을 정의합니다.

예제

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"　orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5"　style="stroke:　none;　fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker　id="markerArrow"　markerWidth="13" markerHeight="13" refX="2" refY="7"　orient="auto">
　　　　　　　　　　　　<path　d="M2,2　L2,13　L8,7　L2,2"　style="fill:　#000000;"　></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path　d="M100,20　l0,50"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M140,20　l25,50"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M180,20　l50,50"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M220,20　l50,25"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M260,20　l50,0"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

테스트를 보세요 ‹/›

<marker> 요소 내의 <path>는 오른쪽을 향하는 삼각형을 그립니다. 그러나 경로가 수평선이 아니라면 삼각형을 회전시켜 경로의 방향에 맞게 맞추어야 합니다. '방향'(orient) 속성을 '자동'(auto)으로 설정하여 이 작업을 수행할 수 있습니다. 이는 <marker> 요소 내의 형상을 경로를 참조하여 회전시킵니다.

아래의 이미지는 다른 기울기의 다섯 개의 선을 보여줍니다. 모두는 같은 두 개의 표시를 시작 표시와 종료 표시로 사용합니다. 표시가 사용하는 선의 기울기에 맞춰 자동으로 회전하는 것을 주목해 주세요.

실행 결과는 다음과 같습니다:

이는 <mark> 요소의 orient 속성을 auto로 설정한 결과입니다.

orient 속성의 값을 고정된 각도로 설정할 수도 있습니다. 예를 들어45이는 표시가 사용될 때 해당 각도로 회전하게 합니다. 그러나 이는 자동 정향 기능보다 훨씬 덜 유용합니다.

경로에서 마커를 참조합니다

경로에서 마커를 참조하려면 다음 CSS속성을 사용할 수 있습니다:

marker-start
marker-mid
marker-end

이 세 가지 CSS속성은 마커를 경로의 시작, 중간 및 종료에 할당합니다。

CSS속성은 사용하는 <path>요소의style속성 내에 위치해야 합니다. 아래와 같이 id속성을 참조하여<marker>요소를 참조할 수 있습니다：

marker-start　:　url(#markerId);

markerId는 참조할 <mark>요소의id속성의 값을 대체해야 합니다。

이렇게 모든 세 가지 CSS속성을 사용하는 예제입니다:

예제

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"　orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5"　style="stroke:　none;　fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker　id="markerArrow"　markerWidth="13" markerHeight="13" refX="2" refY="7"　orient="auto">
　　　　　　　　　　　　<path　d="M2,2　L2,13　L8,7　L2,2"　style="fill:　#000000;"　></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path　d="M100,20　l0,50"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M140,20　l25,50"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M180,20　l50,50"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M220,20　l50,25"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path　d="M260,20　l50,0"
　　　　　　　　　　style="stroke:　#0000cc;　stroke-width:　1px;　fill:　none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end:　url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid:　url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

테스트를 보세요 ‹/›

실행 결과는 다음과 같습니다:

다른 형상에서 마커를 참조합니다

<path>요소만이 마커를 사용할 수 있는SVG요소는아닙니다。　 <line>, <polyline> 및 <polygon>요소도 마커를 사용할 수 있습니다。 그들은<path>요소와 완전히 같은 방식으로 작동합니다: 마커 시작, 마커 중간 및 마커 종료(각각: marker-start, marker-mid와marker-end) CSS속성에서<marker>요소의id속성을 참조합니다。

마커 단위

마커의 크기를확대하여 사용하는 경로의선의 너비에 맞게 설정할 수 있습니다. 다음은 시각적 예시입니다：

marker元素的markerUnits속성을strokeWidth로 설정하여이 효과를 달성할 수 있습니다. 이는 실제로는이 속성의 기본값이며, markerUnits속성을 설정하지 않았더라도 이는 기본 동작입니다. SVG 코드의 모습은 다음과 같습니다：

<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
　　　　orient="auto" markerUnits="strokeWidth">
　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
</marker>

자동 축소 표시를 피하고 경로의 턱밀을 맞추기 위해 markerUnits 속성을 userSpaceOnUse로 설정하십시오. 이렇게 하면 사용자가 경로의 턱밀을 어떻게 설정하든지 관계없이 표시는 그 크기를 유지합니다.

SVG <text> 텍스트 SVG <path> 경로