如何修改SVG代码实现罗盘玫瑰的10°长刻度与5°短刻度

现有代码的局限 #

你当前的SVG使用stroke-dasharray生成均匀虚线，无法区分每10°的长刻度和长刻度间每5°的短刻度，因此需要改用独立的刻度元素实现需求。

代码修改方案：旋转线条生成刻度 #

以下是直接可用的SVG代码，实现36个长刻度、36个短刻度的要求，你可以按需调整刻度长度、颜色、粗细等参数：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 165 165">
  <!-- 外圈参考圆（可选） -->
  <circle cx="82.5" cy="82.5" r="75" fill="none" stroke="#000" stroke-width="1"/>
  
  <!-- 长刻度组：每10°一个，共36个 -->
  <g stroke="#000" stroke-width="1.5">
    <!-- 长刻度模板：从半径65延伸到75，长度10 -->
    <line x1="82.5" y1="17.5" x2="82.5" y2="7.5" id="long-tick"/>
    <!-- 复制长刻度，每次旋转10° -->
    <use xlink:href="#long-tick" transform="rotate(10, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(20, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(30, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(40, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(50, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(60, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(70, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(80, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(90, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(100, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(110, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(120, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(130, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(140, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(150, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(160, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(170, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(180, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(190, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(200, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(210, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(220, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(230, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(240, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(250, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(260, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(270, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(280, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(290, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(300, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(310, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(320, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(330, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(340, 82.5, 82.5)"/>
    <use xlink:href="#long-tick" transform="rotate(350, 82.5, 82.5)"/>
  </g>
  
  <!-- 短刻度组：每5°一个（位于长刻度之间），共36个 -->
  <g stroke="#000" stroke-width="1">
    <!-- 短刻度模板：从半径70延伸到75，长度5 -->
    <line x1="82.5" y1="12.5" x2="82.5" y2="7.5" id="short-tick"/>
    <!-- 复制短刻度，从5°开始每次旋转10° -->
    <use xlink:href="#short-tick" transform="rotate(5, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(15, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(25, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(35, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(45, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(55, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(65, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(75, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(85, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(95, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(105, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(115, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(125, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(135, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(145, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(155, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(165, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(175, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(185, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(195, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(205, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(215, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(225, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(235, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(245, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(255, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(265, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(275, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(285, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(295, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(305, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(315, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(325, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(335, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(345, 82.5, 82.5)"/>
    <use xlink:href="#short-tick" transform="rotate(355, 82.5, 82.5)"/>
  </g>
</svg>

参数调整指南 #

• 刻度长度：修改长刻度的y1（示例中为17.5）和短刻度的y1（示例中为12.5），数值越小，刻度越长；
• 刻度颜色：替换stroke="#000"为目标颜色值；
• 刻度粗细：调整stroke-width的数值，数值越大刻度越粗；
• 整体尺寸：修改width、height或viewBox参数，或调整外圈圆的r="75"来缩放罗盘。

非代码工具实现方案（适合非开发人员） #

如果你不想手动编写代码，可借助矢量图形工具（如Inkscape、Adobe Illustrator）完成：

1. 绘制中心圆，设置半径为75；
2. 绘制一条长刻度，对齐到0°位置；
3. 使用工具的旋转复制功能，每次旋转10°，复制35次，得到36个长刻度；
4. 绘制一条短刻度，对齐到5°位置；
5. 同样用旋转复制，每次旋转10°，复制35次，得到36个短刻度；
6. 导出为SVG格式即可。

内容的提问来源于stack exchange，提问作者Richard Williams