Question

是否可以仅在笔画的一端添加线帽？并非两端都是以下示例中显示的默认值。

＆＃13;

<?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>

＆＃13;

Answer 1

你可以用两条线做到这一点，一条线在另一条线之上。

＆＃13;

<?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>

＆＃13;

Answer 2

Paulie_D建议的另一种灵活的解决方案，使用单行和标记/标记端：

<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id="round" viewBox="0 0 1 1" markerWidth="1" orient="auto">
            <circle r="0.5" fill="teal"/>
        </marker>
    </defs>

    <line x1="30" y1="90" x2="30" y2="30"
          stroke="teal" stroke-width="20" marker-end="url(#round)"/>

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

    <line x1="90" y1="30" x2="90" y2="90"
          stroke="teal" stroke-width="20" marker-end="url(#round)"/>

    <path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
          stroke="white"/>
</svg>

只有一端的SVG冲程线帽

2 个答案: