Wie SVG Stroke Linecap anpassen

Ich würde gerne wissen, wenn jemand versucht, eine benutzerdefinierte Form auf der SVG-Strich-Line-Cap zu erstellen. Anstatt des Standards (rund, quadratisch) möchte ich einen inversen Halbkreis auf dem Pfad in einem Countdown-Timer erstellen. Lassen Sie mich wissen, ob dies mit SVG möglich ist/falls jemand ähnliches versucht hat. Grüße SureshWie SVG Stroke Linecap anpassen

Quelle

2016-06-21 sur

eine Markierung auf der Linie über Marker-Ende und Marker-Start anhängen. –

Als Robert vorgeschlagen, können Sie ein <marker>, mit marker-end, verwenden Sie eine benutzerdefinierte Endkappe auf eine Linie hinzuzufügen.

<svg> 
 
    
 
    <defs> 
 
    <marker id="InverseSemicircleEnd" 
 
     viewBox="0 0 5 10" refX="0" refY="5" 
 
     markerUnits="strokeWidth" 
 
     markerWidth="0.5" markerHeight="1" 
 
     orient="auto"> 
 
     <path d="M 0 0 L 5 0 A 5 5 0 0 0 5 10 L 0 10 z" /> 
 
    </marker> 
 
    </defs> 
 
    
 
    <line y1="75" x2="270" y2="75" 
 
     fill="none" stroke="black" stroke-width="40" 
 
     marker-end="url(#InverseSemicircleEnd)" /> 
 
</svg>

Quelle

2016-06-21 16:09:49

Marker sind sehr fiddly auf IE - Sie müssen möglicherweise experimentieren –

Ja, ich habe vergessen zu erwähnen. IE hat lange Fehler mit Markern, die mit 'markerUnits =" strokeWidth "' definiert wurden. Sie können Ihre Markierungen stattdessen mit festen Breiten neu definieren, aber dann benötigen Sie für jede verwendete Strichbreite eine Markierung. –

Wie SVG Stroke Linecap anpassen

Antwort

Verwandte Themen