SVG
폴리 라인

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
수색…


통사론

  • <polyline points="10,5 25,15 20,10" />

매개 변수

매개 변수 세부
전철기 points 속성은 포인트 목록을 정의합니다. 각 점은 사용자 좌표계에서 ax 및 y 좌표로 정의됩니다.
획 폭 스트로크의 폭
뇌졸중 - 불투명도 뇌졸중의 불투명도
뇌졸중 - 대진표 (선택 사항) 획의 대시 패턴을 지정합니다.
스트로크 - 라인 캡 (선택 사항) 행 끝을 플러시, 라운드 또는 제곱근 해제할지 ( "엉덩이"(기본값) / "둥근"/ "사각형") 지정합니다
획 - 라인 결합 (선택 사항) 선 세그먼트를 결합하는 방법을 지정합니다 (예 : "miter"(기본값) / "round"/ "bevel").
뇌졸중 - 미터 한계 (선택 사항) 마이 터의 최대 치수를 지정합니다. 이 제한을 초과하는 결합 된 조인은 경사 결합으로 변환됩니다. 기본값 = "4"

폴리 라인을 포함한 SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="10,5 25,15 20,10" />
</svg>

대체 linejoins, linecaps 및 miterlimits가있는 폴리 라인

<svg width="600px" height="600px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" />
  
      <text x="320" y="20">Default drawing stroke</text>
  
      <g transform="translate(0,150)">
      <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="2"/>
  
      <text x="320" y="20">stroke-linecap="butt" (default)</text>
      <text x="320" y="40">stroke-linejoin="miter"(default)</text>
      <text x="320" y="60">stroke-miterlimit="2"</text>
  </g>

  <g transform="translate(0,300)">
      <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
  
      <text x="320" y="20">stroke-linecap="round" </text>
      <text x="320" y="40">stroke-linejoin="round" </text>

  </g>
  <g transform="translate(0,450)">
      <polyline points="10,10,50,40,80,30,120,90,130,10,180,50,250,100,300,10" fill="none" stroke="red" stroke-width="10" stroke-linecap="square" stroke-linejoin="bevel"/>
  
      <text x="320" y="20">stroke-linecap="square"</text>
      <text x="320" y="40">stroke-linejoin="bevel"</text>
  </g>
  
</svg>

결과

여기에 이미지 설명을 입력하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow