SVG stroke-linecap只在一端

是否有可能只在筆畫的一端添加一個linecap？並非如下面示例中所示的默認值那樣結束。SVG stroke-linecap只在一端

<?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 stroke-linecap只在一端

回答

相關問題