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

回答

相关问题