SVG 轮子问题

Question

我一直在做我的项目，我最近用 css adn 创建了一个 12 部分的轮子，最近有人告诉我用 svg 更好更容易，所以我一直在做这个项目，并在一些帮助下我成功地做到了这个 [svg 色轮][1]。但是我有两个问题需要帮助。第一个问题是如何在每个部分添加文本，例如我希望每个部分代表一个数字 1-12，中间（中心的小白色圆圈）代表数字 13。第二个问题是我可以制作这些作品会改变颜色，我的意思是（例如带有红色的作品）从红色开始，然后慢慢改变红色的色调/不透明度。 [1]：https://i.stack.imgur.com/YHvx8.png

    .color-wheel {
  --num-colors: 12;
  --color-size: calc(100% / var(--num-colors));
  width: 550px;
  height: 550px;
  position: relative;
  border-radius: 50%;
  background: conic-gradient(
    #f22 calc(0 * var(--color-size)) calc(1 * var(--color-size)), 
    #f06 calc(1 * var(--color-size)) calc(2 * var(--color-size)), 
    #63b calc(2 * var(--color-size)) calc(3 * var(--color-size)), 
    #44b calc(3 * var(--color-size)) calc(4 * var(--color-size)), 
    #09f calc(4 * var(--color-size)) calc(5 * var(--color-size)), 
    #0af calc(5 * var(--color-size)) calc(6 * var(--color-size)), 
    #0bd calc(6 * var(--color-size)) calc(7 * var(--color-size)), 
    #098 calc(7 * var(--color-size)) calc(8 * var(--color-size)), 
    #0a4 calc(8 * var(--color-size)) calc(9 * var(--color-size)), 
    #7c3 calc(9 * var(--color-size)) calc(10 * var(--color-size)), 
    #fe0 calc(10 * var(--color-size)) calc(11 * var(--color-size)), 
    #fb0 calc(11 * var(--color-size)) calc(12 * var(--color-size))
  );
  transform: rotate(calc(-180deg / var(--num-colors)));
}

.color-wheel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: white;
  width: 50%;
  height: 50%;
  tra

nsform: 翻译(-50%, -50%); }

Answer 1

为了更改 svg 的颜色，您必须将它们作为 svg 标签内联；作为 img 标签中的源的文件引用不适用于此目的。

在 svg 中，每个轮子部分都需要有一个与其关联的 css 类来应用颜色。在这些类上，您可以使用背景的填充属性和边框的描边属性。

.section1 {
    fill: #333;
}
.section1:hover {
    fill: #f70;
}
/* other sections follow */

您可以使用 before 伪元素和 content 属性来设置文本：

.section1 {
    position: relative;
}
.section1::before {
    display: block;
    position: absolute;
    content: “some number”
}