質問はここで私の前の質問へのフォローアップであるSVGを使用して、リストおよびHTML/CSS

Question

を作成します。基本的に、私は、SVGが含まれるであろうgitのスタイルでリストを持つことができ
Creating a git commits graph style list with css/js

ズームインすると画質が落ちません。

基本的な:beforeと:afterは機能しますが、これをどうにか改善できるかどうかは疑問でした。
ありがとうございます！

Answer 1

Git Commits GraphのSVG版です。
パス、サークル、およびテキストSVG要素を使用してこのSVGグラフィックを作成しました。

あなたのように塗りとストロークの色を変更することができます。ここで

デモ：

<svg xmlns="http://www.w3.org/2000/svg" id="Git-Commits" width="350" height="450" viewBox="0 0 350 450"> 
 
    <path class="svg_img" id="Outline" fill="none" stroke="#010101" stroke-width="2" d="M57.016 43.048v360l108-79v-210z"/> 
 
    <circle id="List-Item6" cx="165.016" cy="324.048" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/> 
 
    <circle id="List-Item5" cx="164.877" cy="253.1" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/> 
 
    <circle id="List-Item4" cx="164.877" cy="185.48" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/> 
 
    <circle id="List-Item3" cx="165.016" cy="114.048" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/> 
 
    <circle id="List-Item2" cx="57.016" cy="403.048" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/> 
 
    <circle id="List-Item1" cx="57.016" cy="42.107" r="15.62" fill="#4B5AA8" stroke="#121241" stroke-width="2"/> 
 
    <text transform="translate(192.016 121.814)" font-family="'MyriadPro-Regular'" font-size="23.257"> 
 
\t List item 1 
 
    </text> 
 
    <text transform="translate(192.016 192.815)" font-family="'MyriadPro-Regular'" font-size="23.257"> 
 
\t List item 2 
 
    </text> 
 
    <text transform="translate(192.016 258.815)" font-family="'MyriadPro-Regular'" font-size="23.257"> 
 
\t List item 3 
 
    </text> 
 
    <text transform="translate(192.016 331.815)" font-family="'MyriadPro-Regular'" font-size="23.257"> 
 
\t List item 4 
 
    </text> 
 
</svg>