카테고리 없음

SVG 화살표 라인 그리기

GoodDev 2018. 8. 31. 16:14

<svg width="99%" height="15px">

<defs>

<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"

markerWidth="6" markerHeight="6"

orient="auto-start-reverse">

  <path d="M 0 0 L 10 5 L 0 10 z" fill="#c8c8c8"/>

</defs>

  <line x1="6" y1="7" x2="98%" y2="7" fill="none" stroke="#c8c8c8" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)" />

</svg>