수색…
통사론
-
<marker
viewBox = " xy 너비 "refX = " xoffset "refY = " yoffset "orient = " orientation "... 선택적 매개 변수 > - 마커를 그리는 요소들 ...
-
</marker
> - < elementname marker-start = "url (# markerid )"/>는 요소의 시작 부분에 마커를 적용합니다
- < elementname marker-mid = "url (# markerid )"/> 요소의 세그먼트 가운데에 마커를 적용합니다.
- < elementname marker-end = "url (# markerid )"/> 요소의 끝에 마커를 적용합니다.
- 마커는
<line>
,<polyline>
,<polygon>
및<path>
요소에 적용 할 수 있습니다.
매개 변수
매개 변수 | 세부 |
---|---|
뷰 박스 | 마커를 그리는 요소의 단위 시스템을 지정합니다. |
refX | 마커를 그리기위한 좌표계의 x 축의 거리가 기본 그리기 점에서 오프셋되어야합니다. 기본값은 0입니다. |
참조 | 마커를 그리기위한 좌표계의 y 축의 거리가 기본 그리기 점에서 오프셋되어야합니다. 기본값은 0입니다. |
동양 | 값은 auto 또는 angle in degrees 이며 마커에 적용되는 회전을 지정합니다. 다른 모든 좌표 조정 (viewBox, preserveAspectRaio 및 refX, refY)이 수행 된 후에 적용됩니다. 기본값은 0입니다. auto 각도 계산은 복잡합니다. 자세한 내용은 SVG 사양을 참조하십시오. |
마커 유닛 | strokeWidth 또는 userSpaceOnUse 입니다. 기본값은 strokeWidth 입니다. |
markerWidth | markerUnits의 표식의 너비입니다. 기본값은 3입니다. |
markerHeight | markerUnits에서 마커의 높이입니다. 기본값은 3입니다. |
비고
스크립팅 : 렌더링 된 마커 요소는 DOM에 노출되지 않으므로 특정 렌더링 된 마커에 대한 속성이나 요소를 조정할 수는 없습니다 (정의 된 마커 요소를 스크립팅하는 것은 완전히 가능하지만).
마커 요소의 overflow
속성은 자동으로 hidden
으로 설정됩니다. 이것은 마커 타일을 오버 플로우하는 드로잉을 클리핑하는 것입니다. 이것은 CSS에서 명시 적으로 visible
로 설정할 수 visible
. 2016 년 7 월부터 Chrome은 overflow: visible
마커를 지원하지 않지만 마커 요소에 필터를 설정하는 것이 좋습니다. 오버플로 클리핑을 사용할 수없는 것으로 보입니다.
필터는 마커 내의 요소에 적용 할 수 있습니다. 스펙에서 명시 적으로 허용되지는 않았지만 필터는 마커 요소 자체에 지정된 경우에도 작동하는 것으로 보입니다.
마커 요소에 대한 자세한 내용 은 SVG 1.1 사양 의 마커 섹션을 참조하십시오.
기본 마커
이것은 최소한의 매개 변수로 지정된 끝 마커의 예입니다. 원래 요소의 획 색상은 마커에 상속되지 않습니다.
<svg width="800px" height="600px">
<defs>
<marker id="examplemarker"
viewBox="0 0 10 10"
refX="0" refY="5"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<line x1="20" y1="20" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#examplemarker)" />
</svg>
refX, refY 및 orient에 대한 대체 값의 영향
refX
및 refY
로 지정된 마커를 그리는 축 오프셋은 orient
매개 변수로 지정된 회전 전에 적용됩니다. 당신의 다양한 조합의 효과를 볼 수 아래 orient
과 refX
, refY
이를 설명하기 위해.
<svg width="800px" height="600px">
<defs>
<marker id="marker1"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker2"
viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker3"
viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker4"
viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<line x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
<text x="20" y="150"> refX,Y (0,5) orient (auto) </text>
<line x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
<text x="220" y="150"> refX,Y (0,0) orient (0) </text>
<line x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
<text x="20" y="390"> refX,Y (20,20) orient (0) </text>
<line x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
<text x="220" y="390"> refX,Y (20,20) orient (180) </text>
</svg>
markerUnits, markerWidth, markerHeight에 대한 대체 값의 영향
마커 그리기의 기본값은 호출 요소의 획 폭을 사용하는 markerUnits="userSpaceOnUse"
지정하여 마커가 적용되는 요소에 대해 단위 시스템을 사용하여 마커를 그릴 수 있음을 명시 적으로 지정할 수 있습니다. 마커는 3x3 마커 단위 상자에 그려집니다 (markerUnits가 지정되지 않은 경우 3 개의 마커 크기). 그러나 markerHeight
및 markerWidth
를 사용하여 상자의 너비와 높이를 명시 적으로 지정할 수 있습니다. markerUnits
, markerHeight
및 markerWidth
의 다양한 조합의 영향에 대해서는 아래를 참조하십시오.
<svg width="800px" height="600px">
<defs>
<marker id="marker1"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker2"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker3"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="marker4"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<line x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
<text x="20" y="150"> markerUnits = strokeWidth </text>
<text x="20" y="170"> markerWidth|Height = 1 </text>
<line x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
<text x="250" y="150"> markerUnits = strokeWidth </text>
<text x="250" y="170"> markerWidth|Height = 4 </text>
<line x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
<text x="20" y="390"> markerUnits = userSpaceOnUse </text>
<text x="20" y="410"> markerWidth|Height = 15 </text>
<line x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
<text x="250" y="390"> markerUnits = userSpaceOnUse </text>
<text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>
선, 폴리 라인, 폴리곤 및 패스 요소의 시작, 중간 및 끝 표식
요소는 시작, 중간 및 끝 표시를 개별적으로 지정할 수 있습니다. 다음은 표시 할 수있는 모든 요소의 시작, 중간 및 끝 표시의 예입니다. Chrome은 현재 (2016 년 7 월) 다각형의 시작 및 종료 마커 ( 버그 # 633012 )에 대해 자동 방향을 올바르게 계산하지 못하고 아크 경로 세그먼트의 중간 마커를 올바르게 배치하지 않습니다 ( 버그 # 583097 )
<svg width="800px" height="600px">
<defs>
<marker id="red-chevron"
viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
<path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
</marker>
<marker id="black-arrow"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="red-circle"
viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
<circle fill="red" cx="5" cy="5" r="5" />
</marker>
</defs>
<line x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
<text x="20" y="150"> line: marker-mid not applied</text>
<polyline points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
<text x="250" y="150"> polyline </text>
<polygon points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
<text x="20" y="390"> polygon: end/start overlap </text>
<path d="M250,350 l 25,-25
a15,5 -16 0,1 10,-15 l 20,-5
a15,10 -16 0,1 10,-15 l 20,-5
a15,25 -16 0,1 10,-15 l 20,-5
a15,35 -16 0,1 10,-15 l 20,-5"
fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
<text x="250" y="390"> path with arc segments </text>
</svg>