한쪽 끝의 SVG 획 - 선형 캡 - 우수한 라이브러리

선의 끝 부분에만 선 캡을 추가 할 수 있습니까? 아래 샘플에 표시된 기본값은 양 끝이 아닙니다.한쪽 끝의 SVG 획 - 선형 캡

<?xml version="1.0"?> 
 
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <line stroke-linecap="butt" 
 
     x1="30" y1="30" x2="30" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 

 
    <line stroke-linecap="round" 
 
     x1="60" y1="30" x2="60" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 
      
 
    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" 
 
     stroke="white" /> 
 
</svg>

출처

2017-10-05 D-Money

아니 ... 난 그렇게 생각하지 않습니다. * "stroke-linecap 속성은 선을 칠 때 열려있는 부 경로의 끝에 사용할 모양을 지정합니다. *"... 그래서 끝이 모두 열려 있기 때문에 대답은 '아니요'입니다. –

'marker'를 찾고있을 수도 있습니다 - https://www.w3.org/TR/SVG/painting.html#MarkerElement –

두 줄, 다른 상단에 하나이 작업을 수행 할 수 있습니다.

<?xml version="1.0"?> 
 
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
 

 
    <line stroke-linecap="butt" 
 
     x1="30" y1="30" x2="30" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 

 
    <line stroke-linecap="round" 
 
     x1="60" y1="30" x2="60" y2="70" 
 
     stroke="teal" stroke-width="20"/> 
 
    <line stroke-linecap="butt" 
 
     x1="60" y1="40" x2="60" y2="90" 
 
     stroke="teal" stroke-width="20"/> 
 
      
 
    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90" 
 
     stroke="white" /> 
 
</svg>

출처

2017-10-05 21:32:33

한쪽 끝의 SVG 획 - 선형 캡

답변

관련 문제