片端のみの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 –

次の2本のライン、他の上に1でこれを行うことができます。

<?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ストロークリニアキャップ

答えて

関連する問題