使用 SVG 和 HTML/CSS 创建列表答案

【问题标题】：Create a list using SVG and HTML/CSS使用 SVG 和 HTML/CSS 创建列表
【发布时间】：2016-07-06 07:09:22
【问题描述】：

这个问题是我之前的问题的后续问题：
Creating a git commits graph style list with css/js

基本上，我可以有一个 git 样式的列表，其中包括 SVG，这样当我放大它时就不会失去它的质量？

虽然基本的 :before 和 :after 确实有效，但我想知道您是否可以通过某种方式改进它？
谢谢！

【问题讨论】：

标签： html css list svg

【解决方案1】：

这是一个 SVG 版本的 Git Commits Graph。
我使用 Path、Circle 和 Text 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">
	List item 1
  </text>
  <text transform="translate(192.016 192.815)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 2
  </text>
  <text transform="translate(192.016 258.815)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 3
  </text>
  <text transform="translate(192.016 331.815)" font-family="'MyriadPro-Regular'" font-size="23.257">
	List item 4
  </text>
</svg>

【讨论】：

非常感谢！我对 SVG 绘图不是很熟悉，而您是救生员！ :) 干杯！
@Amo，很高兴听到这个消息！祝你好运！ :)